Google Maps JavaScript API v3 remove markers

google-maps, google-maps-api-3, google-maps-markers, javascript, jquery

Solution

You need to store markers, and call `setMap(null)` for every marker to remove from map.

You could try something like this:

var setMarkers = (function() {
    var oldMarkers = null;
    return function(map, locations){
        //Clearing markers, if they exist
        if(oldMarkers && oldMarkers.length !== 0){
            for(var i = 0; i < oldMarkers.length; ++i){
                oldMarkers[i].setMap(null);
            }
        }
        //Adding new markers
        oldMarkers = [];
        for (var i = 0; i < locations.length; i++) {
            var newmarker = locations[i];
            var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]);
            var marker = new google.maps.Marker({
               position: myLatLng,
               map: map,
               title: newmarker[0],
               zIndex: newmarker[3]
            });
            oldMarkers.push( marker );
        }
   };
})();

Problem

I have looked at a large number of "similar" questions and none of the solutions/answers seem to work for me so here we go: I am generating a simple Google Map with a single marker "onload" I then have a menu list a bit like this ``` <ul> <li class="toggle" id="beaches">Item</li> <li class="toggle" id="towns">Item</li> <ul> ``` that on click uses these arrays to marker-populate the map jQuery - ``` $(".toggle").click(function(){ setMarkers(map,$(this).attr('id')); }); var beaches = [ ['Beach 1',38.285827, 20.611038, 4], ['Beach 2', 38.304958,20.604515, 5], ['Beach 3',38.301691,20.597649, 3] ]; var towns = [ ['Town 1',38.343003, 20.535679, 4], ['Town 2',38.339334,20.545807, 5] ]; ``` My population function looks like this: ``` function setMarkers(map, locations) { for (var i = 0; i < locations.length; i++) { var newmarker = locations[i]; var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: newmarker[0], zIndex: newmarker[3] }); } ``` But what I need/want to do is clear all markers first before adding the new ones. Suggestions please Thanks

Original source