CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Jort
Jort

Reputation: 1411

Google maps API v3: Markers don't always continuously bounce

I'm having a few issues with the bounce animation for google maps markers. Basically, I have a list of themes in a column on the right side of my map. Listed underneath each theme are the names of the markers that are connected to it, with checkboxes to visually show/hide the markers. I want to make the corresponding marker bounce continuously while hovering over its linked checkbox, and make the bouncing stop as soon as the user stops hovering over the checkbox. I have the following code at the moment:

HTML:

<input type=\"checkbox\" onmouseenter=\"highlightPoint( " + (amountOfPoints - 1) + " )\" onmouseleave=\"removePointHighlighting( " + (amountOfPoints - 1) + " )\" /> "

Javascript:

function highlightPoint( pointIndex ) {
        window["point" + (pointIndex+1)].setAnimation(google.maps.Animation.BOUNCE);
    }

    function removePointHighlighting( pointIndex ) {
        console.log( "remove animation" );
        window["point" + (pointIndex+1)].setAnimation( null );
    }

This code works nearly as intended, except for a minor hiccup. Sometimes the animation plays continuously while hovering, but sometimes after leaving the hover state, and hovering again, the bounce animation only plays once, then stops. When or why this happens seems to be fairly random. After the animation plays just once, it will not continuously play anymore until the page is refreshed. I am guessing this has something to do with some of the timers behind the animation? I found that the following code is used to play a bounce animation just once:

setTimeout(function(){ marker.setAnimation(null); }, 750);

Is there perhaps a way to "reset" these timers on mouseleave, or is there something else causing the animation to bug out? It's a relatively unimportant feature for the application I'm making, but I would still like to know what the problem is here..

EDIT: This appears to be a browser-specific issue. When testing in Safari and Firefox, there are no problems with the bouncing whatsoever. The problem specified strangely enough occurs only in Chrome. Usually, as soon as the animation is set to null, and set again afterwards, it will only play once. Only on the first mouseover does the bouncing play continuously. Strange..

Upvotes: 7

Views: 1485

Answers (1)

Fingerfactor
Fingerfactor

Reputation: 161

Instead of setting the animation to null, set it to -1. The animation constants are simply ints. I struggled with this problem in my vuejs app for about an hour before figuring this out :/

Upvotes: 15

Related Questions