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

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!