Mouseover and Mouseout listener for Google Maps marker

Question

I would like to have bouncing effect, when I mouseover on marker, and stop animation when mouseleave.

I'm trying to use mouseover and mouseout event on listeners like this:

google.maps.event.addListener(marker, 'mouseover', function() {
  this.setAnimation(google.maps.Animation.BOUNCE);
});

google.maps.event.addListener(marker, 'mouseout', function() {
  this.setAnimation(null);
});

But this is looking weird. I can't explain the wrong behaviour in words - please see this 15 seconds video which I recorded:

===> http://youtu.be/Hcy8823nNQU

What I need is probably mouseleave instead of mouseout, but that event is not provided by their API.

Answer 1

The key is to set animation only when it is not set already, as:

google.maps.event.addListener(marker, 'mouseover', function() {
    if (this.getAnimation() == null || typeof this.getAnimation() === 'undefined') {

        /* 
        Because of the google maps bug of moving cursor several times over and out of marker
        causes bounce animation to break - we use small timer before triggering the bounce animation
        */

        clearTimeout(bounceTimer);

        var that = this;

        bounceTimer = setTimeout(function(){
             that.setAnimation(google.maps.Animation.BOUNCE);
        },
        500);

    }
});

google.maps.event.addListener(marker, 'mouseout', function() {

     if (this.getAnimation() != null) {
        this.setAnimation(null);
     }

     // If we already left marker, no need to bounce when timer is ready
     clearTimeout(bounceTimer);

});

I created a JS fiddle for you.

Edited:

It seems that using marker as draggable: false will break the functionality, so If you want animation to still work you need to add also optimized: false , updated my fiddle to contain these. Also I saw that there is a bug if marker animation is toggled in and out too fast, added small timer to indicate before we start bounce animation, seems to fix the issue.