Bounce a pin in google maps once

Question

I want to bounce a pin on a google map once. The following code will make the marker bounce but it just keeps going...

myPin.setAnimation(google.maps.Animati         


        

Answer 1

Thanks, for the good answer, I just integrated adding a bit of millisenconds

function toggleBounce(currentIcon) {
 currentIcon.setAnimation(null);

if (currentIcon.getAnimation() != null) {
  currentIcon.setAnimation(null);
 } else {
   currentIcon.setAnimation(google.maps.Animation.BOUNCE);
   setTimeout(function(){ currentIcon.setAnimation(null); }, 900);
 }
};

Answer 2

Okay none of the other answers quite worked well enough given the limitations of the API. So here's what I've found.

• Each bounce is about 700ms as of google maps version js?v=3.13.
• Calling marker.setAnimation(null) stops the marker from bouncing only after it completes the current bounce. So if you wait until 710ms have expired in the bounce sequence and then set marker.setAnimation(null), the API will continue to perform an additional bounce without interrupting its current bounce sequence.
• However, if you then immediately call setAnimation(700) again on that same marker it will interrupt the current bounce sequence. Not exactly pretty.
• Also note, that if you're decorating the marker with an overlay of some sort, it won't bounce those items as they are not attached to the marker.

Simple case (as seen in the other answers):

marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function () {
    marker.setAnimation(null);
}, 700); // current maps duration of one bounce (v3.13)

Assuming that:

1. the bouncing occurs from user interaction
2. and you don't want to truncate a current bounce sequence when the user triggers another one on the same object
3. and you don't want to discard that request to perform another bounce sequence,

you can use setTimout in conjunction with jquery's .queue method to prevent a new bounce request from interrupting the current one, but still queuing it up to perform the bounce sequence after the current one completes. (note: I used two bounces instead of one so msec is set to 1400).

more realistic case:

// bounce markers on hover of img
$('#myImage').hover(function () {
    // mouseenter
    var marker = goGetMarker();
    function bounceMarker()
    {
        marker.setAnimation(google.maps.Animation.BOUNCE);
        setTimeout(function ()
        {
            marker.setAnimation(null);
            $(marker).dequeue();
        }, 1400); // timeout value lets marker bounce twice before deactivating
    }

    // use jquery queue
    if ($(marker).queue().length <= 1) // I'm only queuing up 1 extra bounce
        $(marker).queue(bounceMarker);
}, function () {
    // mouseleave
    var marker = goGetMarker();
    marker.setAnimation(null);
});

Answer 3

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