How to remove data from a Google Maps Data Layer?

Question

I see Google Maps support geojson. Looking at the docs here: https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson

Given the last example with the "Google", how can I make it such that I can click a button to add a new Geojson layer, and another button to toggle/remove the "Google" or even a letter? It seems to me that map.data appears to be a single layer, and is not multiple layers.

score 42 · Accepted Answer · answered Apr 21 '14 at 14:11

You are correct in that the Data Layer is a single layer. However, if you manually retrieve the GeoJSON and use the addGeoJson function instead of loadGeoJson you will get the added features returned. You can remove these later on.

So instead of

map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');

You can do something like this (this example uses jQuery to get the data and assumes there is a button with the ID removeBtn):

// Load the GeoJSON manually (works cross-origin since google sets the required HTTP headers)
$.getJSON('https://storage.googleapis.com/maps-devrel/google.json', function (data) {
  var features = map.data.addGeoJson(data);

  // Setup event handler to remove GeoJSON features
  google.maps.event.addDomListener(document.getElementById('removeBtn'), 'click', function () {
    for (var i = 0; i < features.length; i++)
      map.data.remove(features[i]);
  }); 
});

(See this JSbin for a working example you can play around with)

In more complex circumstances, you probably have to keep track of which datasource the user loaded and the features that got created because of that so you can delete them when requested.

Thank you. This answered a different, yet similar question I've been working on for a few hours now. — Giganticus, Oct 28 '14 at 16:18
[@mensi](https://stackoverflow.com/users/871665/mensi) Thank you! This has helped me too in a problem. Could you elaborate why you have to loop through your features var and why you can't just add map.data.remove(features)? — Cédric Bloem, Jan 23 '19 at 07:26

score 33 · Answer 2 · edited Oct 22 '17 at 08:46

33

This worked for me:

map.data.forEach(function(feature) {
    // filter...
    map.data.remove(feature);
});

edited Oct 22 '17 at 08:46

Brian Burns

20,575
8
83
77

answered Feb 14 '15 at 17:32

Irwin

12,551
11
67
97

score 25 · Answer 3 · edited Oct 22 '17 at 08:56

25

While map.data is designed as a placeholder for the common case of a single datasource, you can have multiple, and still use addGeoJSon using something like:

// load data - do the same for data2, data3 or whatever
data1 = new google.maps.Data();
data1.loadGeoJson(url1);

// create some layer control logic for turning on data1
data1.setMap(map) // or restyle or whatever

// turn off data1 and turn on data2
data1.setMap(null) // hides it
data2.setMap(map) // displays data2

edited Oct 22 '17 at 08:56

Brian Burns

20,575
8
83
77

answered Apr 30 '14 at 03:43

jlivni

4,759
1
19
30

The jlivni solution doesn't work : addGeoJson method seems to want a Feature Object. >InvalidValueError: not a Feature or FeatureCollection – Maxime Bescu Aug 25 '14 at 14:08
Thanks for the catch; I meant loadGeoJson (which accepts a url) not addGeoJson; fixing in my answer. – jlivni Aug 25 '14 at 18:49

score 1 · Answer 4 · answered Jan 21 '19 at 15:05

As a follow-up to @mensi's answer, it can be important to keep track of different sets of features loaded from different data sources. You could do that by adding a property to each feature:

feature.setProperty('kind', 'region');
feature.setProperty('kind', 'lake');

However, it may be easier to create multiple data layers. A Google Map by default starts out with a single data layer, but you are not limited to that. You can do:

var datalayer = new google.maps.Data({ map: mymap });

(It's important to set a map option, or your data layer will not show up.)

This way, it's easier to group features by layer, and turn entire layers on or off.

score 0 · Answer 5 · answered Jan 13 '23 at 15:43

0

map.data.forEach((feature) => map.data.remove(feature))

answered Jan 13 '23 at 15:43

Franco Matías Roccia

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Cristik Jan 15 '23 at 08:40

How to remove data from a Google Maps Data Layer?

5 Answers5

Linked