Remove all features from data layer

Question

I used something like:

var map;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {lat: -28, lng: 137.883}
  });
  map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
}

google.maps.event.addDomListener(window, 'load', initialize);

to load a geojson shape file to the map.data layer of my map. In the shape file, there are a couple of 'feature' classes defining polygons to be drawn on the map. Up until here I have no problems.

Later on though, I want to load another geojson file over the other one (replacing the drawn 'features' on the map). When you just load another file over the other one it just redraws it over the other one. How on earth do you clear the map.data layer of all the features before loading in the new geojson shape file?

I've tried using map.data.remove(feature) with a loop, but I can't seem to get all the features from the map.data layer.

Answer 1

This will iterate over all the features and remove them from map.data.

map.data.forEach(function(feature) {
    // If you want, check here for some constraints.
    map.data.remove(feature);
});

Edit 1: Explanation Map data forEach function use callbacks, so you have to give a callback function as parameter:

var callback = function(){ alert("Hi, I am a callback"); }; 
map.data.forEach(callback);

Now for each element in data it will show an alert. It's also possible to give callbacks with parameter, like in the code shown above.

   var callback = function(feature) {
        // If you want, check here for some constraints.
        map.data.remove(feature);
   };
   map.data.forEach(callback);

Further explanation and examples: http://recurial.com/programming/understanding-callback-functions-in-javascript/

Answer 2

Seems that the map.data is a collection of 'feature' classes.

So you can use the map.data to iterate through and remove each feature in the collection