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.

Maybe [**this**](http://stackoverflow.com/questions/2948097/google-maps-api-v3-how-to-clear-overlays#answer-7882263) will be useful to you? — blex, Jun 25 '14 at 14:24
Unfortunately, markers are in a different layer to the map.data layer. But already found the solution thanks. Plus the final solution is for google maps api v2 — Plendor, Jun 25 '14 at 14:27

score 30 · Accepted Answer · edited Nov 17 '16 at 13:59

30

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/

edited Nov 17 '16 at 13:59

beaver

17,333
2
40
66

answered Nov 20 '14 at 15:30

Gidy

426
6
16

3

I tried `map.data.forEach(map.data.remove)` but it threw an error. Shouldn't it do the same thing as what you wrote? – Jayen Jan 25 '15 at 06:19
You tried my code or only `map.data.forEach(map.data.remove)` ? – Gidy Jan 26 '15 at 16:41
I tried both. Your way works fine. Mine does not. I guess I don't understand javascript well enough to take shortcuts like this. – Jayen Jan 27 '15 at 04:09
Yes, its tricky how the anonymus function works. I can't explain it either. Maybe this [link](http://recurial.com/programming/understanding-callback-functions-in-javascript/) helps you, to understand the concept of a callback a little bite more. – Gidy Jan 27 '15 at 09:04
map.data.forEach(map.data.remove.bind(this)) might work. :) – Allan Nienhuis Feb 28 '20 at 21:54
I've tried to use it to remove the manually added polygons and markers. This loop does not find either of them.. ? – Alexander May 03 '22 at 16:15

score 1 · Answer 2 · answered Jun 25 '14 at 14:25

1

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

answered Jun 25 '14 at 14:25

Plendor

310
1
4
16

Remove all features from data layer

2 Answers2

Linked