Toggling on/off Markers in Google Maps API v3

Question

I'm having trouble getting the setMap(null); function that everyone seems to be recommending to work.

I believe it may be a problem with the way I've implemented the markers.

If someone could take a look and let me know if you see something wrong I'd greatly appreciate it.

LINK: http://www.dougglover.com/samples/UOITMap/v2/

Answer 1

The basic problem is that if you want this to work you've got to make up your mind about what the markersTest object is supposed to hold. You can't seem to decide whether the elements in markersTest should be markers or should be arrays that tell you about where markers are going to be placed.

Quoting from your javascript file, here are the two functions that get executed when you check/clear the checkbox:

15  function addTestMarkers(){
16      for(var i in markersTest) {
17          var location = new google.maps.LatLng(markersTest[i][1], markersTest[i][2]);
18          marker = new google.maps.Marker({
19              position: location,
20              map: map
21          });
22      }
23  }
24  
25  // Removes the overlays from the map, but keeps them in the array
26  function clearOverlays() {
27      if (markersTest) {
28          for (i in markersTest) {
29              markersTest[i].setMap(null);
30          }
31      }
32  }

For addTestMarkers to work, the markersTest object needs to hold descriptions of where the markers should go. For clearOverlays to work, the markersTest object needs to hold markers.

Here's my suggestion: change the markersTest object as you set it up at the top of the javascript file to markerDestinations, and at the top of the javascript file have markersTest initialized with:

markersTest = {};

Then, modify addTestMarkers to:

function addTestMarkers() {
    for(var i in markerDestinations) {
        var location = new google.maps.LatLng(markersDestinations[i][1], markersDestinations[i][2]);
        markersTest[i] = new google.maps.Marker({
            position: location,
            map: map
        });
    }
}

The key change is to make addTestMarkers actually put the markers into the markersTest object.