Mouseover and Mouseout Listener for Google Maps marker

Question

I would like to have a bouncing effect when I hover over a marker and stop the animation when the mouse.

I am trying to use the mouseover and mouseout event for 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 it looks weird. I can’t explain the wrong behavior in words - see this video in 15 seconds, which I recorded:

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

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

Answer 1

The key is to install the animation only when it is not already installed, like:

 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 script for you.

Edited by:

Using the marker as draggable: false seems to break functionality, so if you want the animation to still work, you need to add optimized: false as well, updating my script to contain it. I also saw that there is an error if the marker animation switches too quickly and exits, adds a small timer to indicate before we start the bounce animation, it seems to fix the problem.