Google Maps API

Animar un marker en Google Maps

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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *