Question

i have a question about google maps markers and javascript.

i have a page that only has a div (map_canvas) that creates a marker when you click on it, and a textfield where you input the name of a marker and the marker starts bouncing …

to keep track of the markers i have an array of all the markers added. The problem is that when it gets to 20+ markers the UI tends to become unresponsive while its looping…

here is the loop that i have, its inside a function that takes the marker id as a parameter

for (var i=0; i < markers.length; i++) {
        if(markers[i].id == id)
        {
            if(markers[i].getAnimation() != null)
            {
                markers[i].setAnimation(null);
            }
            else
            {
                markers[i].setAnimation(google.maps.Animation.BOUNCE);
            }
        }
        else
            markers[i].setAnimation(null);
    }

please let me know if this is a re-post or if i should provide more information … this is my first question here!

Answer 1

I would suggest using id as the index in your markers array so that you can access each marker directly rather than looping to find it. Once you have a “current” marker, make a note of which it is in order that you know which one to stop bouncing when you start the next one bouncing.

var lastmarker;
...    
if (lastmarker) {markers[lastmarker].setAnimation(null)}
markers[id].setAnimation(google.maps.Animation.BOUNCE);
lastmarker=id;

Of course, the viability of this suggestion depends on the rest of your code, of which we know nothing.