Google Maps API v3 marker drop and bounce animation

google-maps, javascript

Solution

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>

Problem

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.

Original source