Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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..

like image 577
Jort Avatar asked Dec 02 '13 12:12

Jort


People also ask

How do I move a marker smoothly on google maps?

The transition() and moveMarker() are used to move marker smoothly on click on the Google map.

How do you refresh a marker on google maps?

To reload the markers, when you create then, push them to an array. Then create a function where you iterate through the array, setting the markers map as null. After this, erase the array.

Is google maps API no longer free?

You won't be charged until your usage exceeds $200 in a month. Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).


Video Answer


1 Answers

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 :/

like image 172
Fingerfactor Avatar answered Sep 25 '22 17:09

Fingerfactor