Iterating through a multidimensional Javascript array filled with Google Maps markers objects

Question

I store all of the Google Maps marker objects in a single array. Right now I am trying to set up a function that will delete all of the markers in the array from the map, but I'm having trouble with the loop.

First, I put each marker in an array like so:

eval("markerZip"+value.zip+" = new google.maps.Marker({map: map, icon: '/images/mapmarker.php?m=zip_marker.png', position: zipCenter});");
eval("markersArray['markerZip"+value.zip+"'] =  markerZip"+value.zip);

Then when I want to delete the markers I do this:

function removeAllMarkers(exceptId) {
    $.each(markersArray, function(index, value) {
        if(value != exceptId) {
            value.setMap(null);
            console.log(value);
        }
    });
}

However, iterating through the array doesn't seem to be doing anything. It's as if the array is empty because the console.log line returns nothing. When I display the array in my console, it shows "[]" (which I then click to display the child objects) which contains:

markerZip01002
    U { gm_accessors_={...}, map=U, b=U, more...}

markerZip02111
    U { gm_accessors_={...}, map=U, b=U, more...}

markerZip02135
    U { gm_accessors_={...}, map=U, b=U, more...}

markerZip02139
    U { gm_accessors_={...}, map=U, b=U, more...}

markerZip02466
    U { gm_accessors_={...}, map=U, b=U, more...}

Why are you using eval() instead of just writing the appropriate javascript code? — jfriend00
– jfriend00, Commented Dec 31, 2011 at 5:05

Sean Vieira · Accepted Answer · 2011-12-31 05:27:03Z

The issue is that you are using an array as a hash or dictionary. jQuery checks to see if the object it has been passed has a length property - see here for the implementation. Since you are passing an array, it iterates over the values in the array which can be accessed via the integer keys between 0 and obj.length - 1. Since there are no values in your array that can be accessed that way, the loop immediately terminates.

You are treating your markersArray as a JavaScript object rather than an array - so you'd be better off using {} rather than [] for your markersArray object.

<rant>In addition, there is no need to use eval for setting keys in a hash - ever. It is inefficient - you need to start up a new version of the JavaScript runtime for each invocation of eval. It is fragile - you are writing strings that contain code and injecting other strings inside them - a misplaced " or // in your data can stop your program cold. And finally, it requires continual use of the global scope - which should be avoided whenever you don't own the global scope.</rant>

You can replace these two lines:

eval("markerZip"+value.zip+" = new google.maps.Marker({map: map/*etc.*/});");
eval("markersArray['markerZip"+value.zip+"'] =  markerZip"+value.zip);

with this one line:

// Assume we did this earlier
// var markersHash = {};
markersHash["markerZip"+value.zip] = new google.maps.Marker({map: map /*etc.*/});

When you do that, your call to $.each will work as expected.

Collectives™ on Stack Overflow

Iterating through a multidimensional Javascript array filled with Google Maps markers objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related