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..
The transition() and moveMarker() are used to move marker smoothly on click on the Google map.
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.
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).
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 :/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With