GoogleマップAPI v3のマーカーの低下とアニメーション

Question

をバウンス私は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); 
    } 
} 

から、この変形例のコードを持って、DROPアニメーションが停止した後にバウンスするDROPからマーカーのアニメーションを変更することが可能である場合、私は疑問に思いますか？

setTimeout（）関数を使って変更することができましたが、それはスムーズに行えません。どんな助けもありがとう。

Answer 1

これを試すことができます。 ：

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

Answer 2

はgoogle.maps.event.addListener(map, 'idle', function()...)上のマーカーのアニメーションを変更してみてください - マーカー（単数または複数）を加えた後、これが呼び出されます。

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>