Why are my markers not redisplaying after resetting the Google map?

Question

I'm allowing users to reset/recenter the map. I posted about it here.

I added the code that should work to reload the markers based on which checkboxes they selected.

To give you an idea of what I'm talking about, here's a screen shot of how the site looks when it first displays:

enter image description here

If I select a different view from the dropdown list (any state, or USA 50+), I can then select a checkbox or checkboxes and it/they will work, but my code that should redraw the markers based on which checkboxes were already clicked does not.

Here is the code that recenters the map as an item is selected from the dropdown:

$('#stateSelector').on("change",function() {
    var $this = $(this).val();
    if ($this == "USA (48)")
    {
        LoadUSA48();
    }
    else if ($this == "USA (50+)")
    {
        LoadUSA50();
    }
    else if ($this == "Alabama")
    {
        LoadAlabama();
    }
    . . .
    else if ($this == "Wyoming")
    {
        LoadWyoming();
    }
});

Here is an example Load() method:

function LoadAlabama() {
    $("#map").removeData();
    $("#map").goMap({ 
        latitude: 32.806673, 
        longitude: -86.791133, 
        zoom: 8 
    }); 
}

There is a ReloadMarkers() method that is called at the end of the select event:

function ReloadMarkers() {
    if ($('#NFLCheckbox').is(':checked')) {
        ShowNFLMarkers();
    }

    . . .

    if ($('#AmMusiciansCheckbox').is(':checked')) {
        ShowMusiciansMarkers();
    }
}

The ShowX() methods contains all the appropriate of the following type of code:

$.goMap.createMarker({
    address: 'Green Bay, Wisconsin',
    title: 'Green Bay Packers',
    group: 'NFLGroup',
    icon: constants.nflIcon,
    html: getPackers()
});

It's as if the checked state of the checkboxes is not being recognized...

score 1 · Accepted Answer · answered Dec 13 '13 at 03:20

Because in your LoadAlabama() function the map is getting re-initialized. The markers were associated with the old map object. When you change the option from the dropdown, the new map object does not have any markers associated with it. Thus a showHide won't work (because the markers are not there on the map yet).

Best solution would be to store the lat-long values of the places in an object or array which I guess you are already doing. And when you re-initialize the map, you need to iterate over the markers and set the map for the markers that need to be displayed. Something like this

function setMapForMarkers (mapMarkers) {
    $(mapMarkers).each(function(i, elm) {
        elm.setMap(myMap);
    });
}

function ReloadMarkers() {
    if ($('#NFLCheckbox').is(':checked')) {
         setMapForMarkers(NFLGroupMarkers);    //NFL Group markers should be an array containing the markers that need to be displayed.
    } else {
         //whatever set of markers you want to display here
    }

}

You can refer to this for a working example https://developers.google.com/maps/documentation/javascript/examples/marker-remove

Interesting; I see no markers on that page; and mashing the "Show All Markers" button does not place any, either... — B. Clay Shannon-B. Crow Raven, Dec 13 '13 at 16:18
you need to click on the map to drop the marker first. Everything else would work after that. — Rahul Nanwani, Dec 14 '13 at 08:31

Why are my markers not redisplaying after resetting the Google map?

1 Answers1