Remove Google Map geojson polygon

Question

How to remove previous data when loading new data?

var map = null,
    drawLayerSite = null;

map = new google.maps.Map(document.getElementById('mapDiv'), {
    zoom: 11,
    // mapTypeId: 'satellite'
    mapTypeId: 'terrain'
});

function reloadGeoJson(geoJson) {
    map.data.forEach(function(feature) {
        map.data.remove(feature);
    });


    drawLayerSite = new google.maps.Data({map:map});
    drawLayerSite.setStyle({
        fillColor:    'rgba(1, 84, 90, 0.5)',
        fillOpacity:   0.5,
        strokeWeight:  1,
        strokeColor:   '#01545A',
        strokeOpacity: 0.8
    });
    drawLayerSite.addGeoJson(geoJson);
}

When the data is loaded the second time, the old ones remain. They are not removed.

Map features are empty.

Answer 1

You are creating a new google.maps.Data object every time you call the reloadGeoJson function. That is OK, but you lose the reference to the old one when you create the new one. Remove the old layer from the map (if it exists), before creating the new version.

function reloadGeoJson(geoJson) {
  // Remove the old layer from the map, if it exists
  if (drawLayerSite && drawLayerSite.setMap)
    drawLayerSite.setMap(null);
  drawLayerSite = new google.maps.Data({
    map: map
  });
  drawLayerSite.setStyle({
    fillColor: 'rgba(1, 84, 90, 0.5)',
    fillOpacity: 0.5,
    strokeWeight: 1,
    strokeColor: '#01545A',
    strokeOpacity: 0.8
  });
  drawLayerSite.addGeoJson(geoJson);
}

proof of concept fiddle

code snippet:

 var map; var drawLayerSite = null; function initialize() { map = new google.maps.Map(document.getElementById('mapDiv'), { zoom: 4, // mapTypeId: 'satellite' mapTypeId: 'terrain', center: { lat: -25.76, lng: 128.84 } }); setInterval(function() { modify(geoJson1); reloadGeoJson(geoJson1) }, 1000); } function reloadGeoJson(geoJson) { if (drawLayerSite && drawLayerSite.setMap) drawLayerSite.setMap(null); drawLayerSite = new google.maps.Data({ map: map }); drawLayerSite.setStyle({ fillColor: 'rgba(1, 84, 90, 0.5)', fillOpacity: 0.5, strokeWeight: 1, strokeColor: '#01545A', strokeOpacity: 0.8 }); drawLayerSite.addGeoJson(geoJson); } google.maps.event.addDomListener(window, "load", initialize); function modify(geoJson) { var heading = Math.random() * 360; for (var i = 0; i < geoJson.features.length; i++) { var pt = new google.maps.LatLng( geoJson.features[i].geometry.coordinates[1], geoJson.features[i].geometry.coordinates[0]); var newPt = google.maps.geometry.spherical.computeOffset(pt, 50000, heading); geoJson.features[i].geometry.coordinates = [newPt.lng(), newPt.lat()]; } } var geoJson1 = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "letter": "G", "color": "blue", "rank": "7", "ascii": "71" }, "geometry": { "type": "Point", "coordinates": [123.61, -22.14] } }, { "type": "Feature", "properties": { "letter": "o", "color": "red", "rank": "15", "ascii": "111" }, "geometry": { "type": "Point", "coordinates": [128.84, -25.76] } }, { "type": "Feature", "properties": { "letter": "o", "color": "yellow", "rank": "15", "ascii": "111" }, "geometry": { "type": "Point", "coordinates": [131.87, -25.76] } }, { "type": "Feature", "properties": { "letter": "g", "color": "blue", "rank": "7", "ascii": "103" }, "geometry": { "type": "Point", "coordinates": [138.12, -25.04] } }, { "type": "Feature", "properties": { "letter": "l", "color": "green", "rank": "12", "ascii": "108" }, "geometry": { "type": "Point", "coordinates": [140.14, -21.04] } }, { "type": "Feature", "properties": { "letter": "e", "color": "red", "rank": "5", "ascii": "101" }, "geometry": { "type": "Point", "coordinates": [144.14, -27.41] } } ] }; 

 html, body, #mapDiv { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> <div id="mapDiv"></div>