Oyente Mouseover y Mouseout para el marcador de Google Maps

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.

preguntado el 05 de mayo de 13 a las 14:05

1 Respuestas

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);

});

Creé un Violín JS para ti.

Editado:

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.

contestado el 05 de mayo de 13 a las 16:05

Thank you for quick response. For me it's not working, definitely I have some problem somewhere in other code. For instance when I remove conditions from your JS fiddle, it's still working. - Stefan Huska

Oooh, I got it. I need to add "draggable: true", and then it's working! Look, here's your fiddle, but I set draggable to false and we see the problem I have - jsfiddle.net/Mas4D/1 But why? I don't want marker to be draggable, hmm. - Stefan Huska

I answer in a sec, I seemed to find maybe some bugs of google maps and how to overcome them. :) - Mauno Vähä

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.