Blog
En esta ocasión veremos cómo animar un marker en Google Maps utilizando la función setTimeout() que nos ofrece Java Script, si no entienden como funciona dicha función los invito a pasar por el tutorial donde se explica: http://programacionextrema.com/2015/11/13/funciones-setinterval-y-settimeout-en-java-script.
Cómo animar un marker en Google Maps
Para realizar la animación vamos a utilizar la propiedad animation con el valor google.maps.Animation.DROP al crear un marker:
new google.maps.Marker({ position: position, map: map, animation: google.maps.Animation.DROP });
A continuación un ejemplo completo donde se agregan varios markers a un mapa con una animación en tiempos diferentes, utilizando la función setTimeout().
<!DOCTYPE html> <html style="height:100%"> <head> <title>Animar un marker en Google Maps</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> html, body{ height:100%; margin: 0px; } #googleMap{ width:100%; height:100%; } </style> <script type="text/javascript"> var neighborhoods = [ {lat: 52.511, lng: 13.447}, {lat: 52.549, lng: 13.422}, {lat: 52.497, lng: 13.396}, {lat: 52.517, lng: 13.394} ]; var markers = []; var map; function initialize() { // Configuración del mapa var mapProp = { zoom: 12, center: {lat: 52.520, lng: 13.410} }; // Agregando el mapa al tag de id googleMap map = new google.maps.Map(document.getElementById("googleMap"), mapProp); // Luego de 8 segundos comienza la animación setTimeout(function(){ drop(); }, 8000) } // Elimina y vuelve a cargar los markers function drop() { clearMarkers(); for (var i = 0; i < neighborhoods.length; i++) { // Se agrega un marker con un tiempo diferente addMarkerWithTimeout(neighborhoods[i], i * 200); } } // Agrega un marker con una animación después de un tiempo (timeout) function addMarkerWithTimeout(position, timeout) { window.setTimeout(function() { markers.push(new google.maps.Marker({ position: position, map: map, animation: google.maps.Animation.DROP })); }, timeout); } // Elimina los markers del mapa function clearMarkers() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; } </script> <script async defer type="text/javascript" src="http://maps.googleapis.com/maps/api/js?signed_in=true&callback=initialize"></script> </head> <body> <div id="googleMap"></div> </body> </html>
Solamente incluyendo el código anterior en un archivo HTML podrán visualizar el mapa con la animación de markers en el navegador.
Hemos llegado al final de este tutorial, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.