I want to synchronize google-maps with angular.js, so I created custom directive for google-maps.

CODE

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


 scope.$watch('geojson', function(newVal, oldVal) {
     if (newVal !== oldVal) {


         map.data.setMap(null);
         map = new google.maps.Map(document.getElementById('map'),
             mapOptions);
         map.data.addGeoJson(scope.geojson);
     }
 }, true);

My solution works but it is not what i would like to achieve, when data is changing, map is loaded each time with new scope.geojson, unfortunately i couldn't find any good solution how to remove just data, I assume there is not some option to add geojson data as layer? and then just clear this layer before adding new geojson, so map will be stable and only geojson data will change?

I want to synchronize google-maps with angular.js, so I created custom directive for google-maps.

CODE

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


 scope.$watch('geojson', function(newVal, oldVal) {
     if (newVal !== oldVal) {


         map.data.setMap(null);
         map = new google.maps.Map(document.getElementById('map'),
             mapOptions);
         map.data.addGeoJson(scope.geojson);
     }
 }, true);

My solution works but it is not what i would like to achieve, when data is changing, map is loaded each time with new scope.geojson, unfortunately i couldn't find any good solution how to remove just data, I assume there is not some option to add geojson data as layer? and then just clear this layer before adding new geojson, so map will be stable and only geojson data will change?

• javascript
• angularjs
• google-maps
• geojson

1 Answer 1

Use the forEach method of the data class to loop over the features and remove them using the remove method:

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

data reference: https://developers.google./maps/documentation/javascript/reference#Data