My code to make markers:

for (var marker in markers) {
    var posMarker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[marker].lat, markers[marker].lng),
        map: map,
        visible: markers[marker].visible
    });     
};

My markers object:

var markers = {
        "London": {"lat": -83.68088192646843, "lng": -125.270751953125, "type": "town", "visible": false},
        "Paris": {"lat": -58.1548020417031, "lng": -21.318115234375, "type": "town", "visible": false},
};

I'm trying to be able to toggle the markers with a checkbox like so:

$('#toggle').change(function() {
    for (var marker in markers) {
        posMarker.setVisible(true);
    };
}); 

But only the last marker in the array is shown, how do I make all of them appear?

Thanks.

My code to make markers:

for (var marker in markers) {
    var posMarker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[marker].lat, markers[marker].lng),
        map: map,
        visible: markers[marker].visible
    });     
};

My markers object:

var markers = {
        "London": {"lat": -83.68088192646843, "lng": -125.270751953125, "type": "town", "visible": false},
        "Paris": {"lat": -58.1548020417031, "lng": -21.318115234375, "type": "town", "visible": false},
};

I'm trying to be able to toggle the markers with a checkbox like so:

$('#toggle').change(function() {
    for (var marker in markers) {
        posMarker.setVisible(true);
    };
}); 

But only the last marker in the array is shown, how do I make all of them appear?

Thanks.

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow asked Jun 29, 2012 at 23:49 HarryHarry 1,15011 gold badge1212 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Well, I see posMarker being used as a temporary variable that places a Google Maps marker, and as the for loop progresses, the posMarker reference "updates" to the latest marker placed. That's why only the last marker is being shown.

You need to keep track of all references to Google Maps markers being placed, including those that have been "consumed". My approach uses an object, much like your markers object but holding references to Google Maps markers. You could also use a plain indexed array (posMarkers[]). It's up to you.

See the Demo, note the LatLngs have been modified for simplicity (looks like you have a custom coordinate system).

Also, I didn't make this change, but I just noticed that it may make more sense to call marker in markers, city in markers because the way your object is written. It would be more readable, but won't affect the execution.

Finally, semicolons at the end of for loops blocks are unneeded, and be careful with the trailing ma after the Paris object (I'm guessing you just erased the rest of the list). In this case it didn't matter, but other times these trailing mas can be a source of hard-to-find bugs.

function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var markers = {
        "London": { "lat": 0, "lng": 0, "type": "town", "visible": false },
        "Paris": { "lat": 10, "lng": 10, "type": "town", "visible": false }
    };

    var posMarkers = {};

    for (var marker in markers) {
        posMarkers[marker] = new google.maps.Marker({
            position: new google.maps.LatLng(markers[marker].lat, markers[marker].lng),
            map: map,
            visible: markers[marker].visible
        });
    }

    $('#toggle').change(function () {
        for (var marker in markers) {
            if (posMarkers[marker].getVisible()) {
                posMarkers[marker].setVisible(false);
            }
            else {
                posMarkers[marker].setVisible(true);
            }
        }
    });
}