Google Maps API v3标记拖放动画

Question

I got this modified example code from google

var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;

function initialize() {
    var mapOptions = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: stockholm
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    marker = new google.maps.Marker({
        map:map,
        draggable:true,
        animation: google.maps.Animation.DROP,
        position: parliament,
        icon: '/img/marker.png'
    });
    google.maps.event.addListener(marker, 'click', toggleBounce);


    setTimeout(function() {  marker.setAnimation(google.maps.Animation.BOUNCE); }, 2000);

}

function toggleBounce() {

  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

and I wonder if it is possible to change marker animation from DROP to BOUNCE after DROP animation stops?

I managed to change it using setTimeout() function but it does not do it smoothly. Any help will be appreciated.

Answer 1

Try changing the marker animation on google.maps.event.addListener(map, 'idle', function ()...) - this will be called after the marker(s) are added.

 document.write('<script src="https://maps.googleapis.com/maps/api/js">\\x3C/script>'); window.onload = function () { // Create map var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, center: new google.maps.LatLng(-33.87, 151.24), mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] } }); // Create marker var marker = new google.maps.Marker({ position: new google.maps.LatLng(-33.890542, 151.274856), map: map, animation: google.maps.Animation.DROP, title: 'Bondi Beach' }); // On idle, change marker animation to bounce google.maps.event.addListener(map, 'idle', function () { marker.setAnimation(google.maps.Animation.BOUNCE); }); } 

 #map_canvas { width: 300px; height: 300px; } 

 <div id="map_canvas"></div> 

Answer 2

You could try this. :

google.maps.event.addListener(marker, "dragend", function(event) { 
          marker.setAnimation(google.maps.Animation.BOUNCE);
        });