MArker Animation GMaps

by rodrigorf

HTML

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://raw.githubusercontent.com/combatwombat/marker-animate/master/markerAnimate.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="map_canvas" ></div>

CSS

#map_canvas { height: 560px; width: 100%  }
#map_canvas img {
max-width: none;
   
}
    
#map_canvas div {
    -webkit-transform: translate3d(0,0,0);
}

JavaScript

initialize();
  
function initialize() 
{
  var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 10,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
   
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);       
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(-34.397, 150.644),
      map: map});
        
  var posicaDestino = new google.maps.LatLng(-34.197, 150.644);

  marker.animateTo(posicaDestino, { duration: 13000,
                                  complete: function() {
                                    alert("Chegou ao destino!");
                                  }
                                });
}