Cómo agregar animaciones personalizadas en Google Map V3 Marker cuando suelto cada marcador uno por uno?

Este mi ejemplo simple de trabajo de la caída de cada marcador uno por uno en el mapa de Google V3. He fijado la animación de gota cuando el marcador se añade a Google Map.

Pero quiero personalizar el Drop con Fade Animation, ¿será posible usar cualquier material de Javascript u otra biblioteca?

Google tiene estas opciones en espacio de nombres ¿Podemos agregar nuestras opciones de animación personalizadas en espacio de nombres?

  • Google.maps.Animation.DROP
  • Google.maps.Animation.BOUNCE
  • Google.maps.Animation.CUSTOM_FADE (¿Es posible?)

Mi código de trabajo para Google map V3

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps Multiple Markers</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; function marker(i) { if (i > locations.length) return; var marker; marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), animation: google.maps.Animation.DROP, map: map }); var t=setTimeout("marker("+(i+1)+")",500); } marker(0); </script> </body> </html> 

Aquí está lo lejos que he llegado. La API de Google Maps agrega un fragmento de fotograma clave CSS en la página desde el interior de http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/14/4/%7Bcommon,map,util,marker%7D .js

Dentro de la página se ve algo como esto

 @-webkit-keyframes _gm2657 { 0 % { -webkit-transform: translate3d(0px, 0px, 0); -webkit-animation-timing-function: ease-out; } 50 % { -webkit-transform: translate3d(0px, -20px, 0); -webkit-animation-timing-function: ease-in ; } 100 % { -webkit-transform: translate3d(0px, 0px, 0); -webkit-animation-timing-function: ease-out; } 

}

La función allí se comprime a

 function uJ(a, b) { var c = []; c[A]("@-webkit-keyframes ", b, " {\\n"); K(ab, function (a) { c[A](100 * a[$k], "% { "); c[A]("-webkit-transform: translate3d(", a[Fv][0], "px,", a[Fv][1], "px,0); "); c[A]("-webkit-animation-timing-function: ", a.wa, "; "); c[A]("}\\n") }); c[A]("}\\n"); return c[Mc]("") } 

No puedo cavar a través de que más en este momento para averiguar cómo hackear en ese objeto.

El problema es que no sé cómo construyen ese nombre de animación de fotogramas clave. He llegado tan lejos como ad="_gm"+l[B](1E4*l[Qb]()) del archivo de arriba, pero buena suerte de seguimiento que uno de nuevo a lo que [B] es o qué objeto 1E4 * l equivale a, o cómo se define Qb.

Mi siguiente ruta sería raspar el HTML para las etiquetas de script que contengan @ -webkit-keyframes _gm y ver acerca de extraer el número utilizado, luego usarlo para escribir su propia animación de fotogramas clave y esperar que google maps use su CSS inyectado en lugar de su propio .

A lo largo de esas líneas escribí un pequeño método jQuery para buscar todas las divs con un atributo de estilo que coincide parcialmente con "_gm".

 var poll; var ntrvl = setInterval(function () { poll = $("div[style*=' _gm']"); if (poll.length > 0) { craftNewAnimation(poll.css('-webkit-animation-name')); clearInterval(ntrvl); } }, 10); function craftNewAnimation(name) { console.log(name); var markup = ['<style>', '@-webkit-keyframes ' + name + ' {', '0%{ opacity: 0; }', '100%{ opacity: 1; }', '}', '</style' ]; $('body').append(markup.join("")); } 

http://jsbin.com/uJAdaJA/3/edit

No reemplaza al primero que detecta la animación por alguna razón. Y podría haber otras maneras de obtener ese nombre de Keyframe mágico sin tanta piratería.

Buena suerte.

  var locations = [ ['Surat', 21.205386, 72.847301, 4], ['Mumbai', 19.068789, 72.870265, 5] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: new google.maps.LatLng(20.120783, 71.8517917), mapTypeId: google.maps.MapTypeId.ROADMAP, }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, draggable:true, animation: google.maps.Animation.DROP, animation: google.maps.Animation.BOUNCE, }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } var bounds = new google.maps.LatLngBounds(); // in the marker-drawing loop: bounds.extend(pos); // after the loop: map.fitBounds(bounds); 

Puede utilizar la utilidad de ricos de Google, que le permite utilizar elementos html como marcadores. Ahora puedes darle al elemento una animación css como quieras, por ejemplo, usando Animate.css de daneden .

Un ejemplo:

  var pictureLabel = document.createElement("img"); pictureLabel.src = YOUR_SOURCE; pictureLabel.width = SOME_WIDTH; pictureLabel.height = SOME_HEIGHT; // daneden even got the exact animation your'e looking for :) pictureLabel.className = pictureLabel.className + " animated fadeInDown"; var marker = new RichMarker({ position: new google.maps.LatLng(YOUR_LAT, YOUR_LNG), map: YOUR_MAP, content: pictureLabel }); 

Si utiliza el marcador rico de Google, no se olvide de usar su solución de errores de clic!

  • Android GoogleMap v2 se recorta o no se muestra completamente
  • Cómo agregar fragmento de mapa mediante programación
  • Actualizado una aplicación con v1 mapa en google jugar ahora mostrando azulejos en blanco
  • Metadatos de error de Google Play Services v13 en AndroidManifest
  • Android Maps: Diferentes ventanas de información para distintos marcadores
  • Problema al eliminar el elemento de clustermanager
  • INSTALL_FAILED_MISSING_SHARED_LIBRARY un proplem de emulador de android
  • Dibujar ruta en el mapa de google basado en lat lang
  • Obtener la ubicación seleccionada de la actividad de Google Maps
  • Destacando una calle en Google Maps en android
  • Distancia entre geopuntos
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.