Question

I’m trying to clear all my polygon objects before I import new geoJSON data and create new objects. I can’t seem to get the setMap(null) function to work correctly. Hopefully someone can kindly let me know where I am failing.

Thank you

var map;
function removeAllMarkers(){// removes all markers from map
//console.log(data);
for( var i = 0; i < data.length; i++ ){
delpolygon = new google.maps.Poly({
    position: data[i]
})
delpoly.setMap(null)
}   
data.length = 0;
//markersInfoArray.length = 0;
};

// ajax request to load json data
var data;
function pullNewData () {
var newRequest = new XMLHttpRequest();
newRequest.open('GET', 'json_template.json', true);
newRequest.onload = function() {
//data = eval("(" + xhr.responseText + ")")
data = JSON.parse(newRequest.responseText)

console.log(data);
sector_callback(data);
removeAllMarkers(data);
};
newRequest.send();
};

//setInterval(pullNewData,5000);

// function to load map into body when page loads
function initialize() { 
var kansas_city = new google.maps.LatLng(39.316858,-94.963194);
var mapOptions = {
zoom: 13,
center: kansas_city,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

// ajax request to load json data
var data;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'json_template.json', true);
xhr.onload = function() {
//data = eval("(" + xhr.responseText + ")")
data = JSON.parse(xhr.responseText)
//console.log(data);
sector_callback(data);
};
xhr.send();

function createClickablePoly(poly, html) {
google.maps.event.addListener(poly, 'click', function(evt) {
    infowindow.setContent(html);
    infowindow.setPosition(evt.latLng);
    infowindow.open(map);
});
}
var infowindow = new google.maps.InfoWindow({});        

var allPolygons = [];
function sector_callback() {
var bounds = new google.maps.LatLngBounds();        
for (var i = 0, len = data.features.length; i < len; i++) {
    var coords = data.features[i].geometry.coordinates[0];
    siteNames = data.features[i].properties.Name; // added for site names
    var path = [];
            //console.log(siteNames);
            //console.log(coords);
    for ( var j = 0, len2 = coords.length; j < len2; j++ ){ // pull out each     set of coords and create a map object
        var pt = new google.maps.LatLng(coords[j][1], coords[j][0])
        bounds.extend(pt);
        path.push(pt);

        //path.push(new google.maps.LatLng(coords[j][1], coords[j][0]));
    }

    var polygons = new google.maps.Polygon({
    path: path,
        strokeColor: "#000000",
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor: "#000000",
        fillOpacity: 0.35,
    map: map
    });
    createClickablePoly(polygons, siteNames);

    google.maps.event.addListener(polygons, 'mouseover', function() {
    var currentPolygon = this;

    currentPolygon.setOptions({ // setOptions is a method and properties below
        fillOpacity: 0.45,
        fillColor: "#FF0000"
        })
    });

    google.maps.event.addListener(polygons, 'mouseout', function() {
    var currentPolygon = this;
    currentPolygon.setOptions({ 
        fillOpacity: 0.35,
        fillColor: "#000000"
        })
    });
    allPolygons.push(polygons); 
  }

}
console.log(allPolygons);

Answer 1

When you create a new Poly, store it in an array, say allPolygons, so you can reference them later.

Then iterate over this Array, and call setMap(null) on every Poly inside.