Google Maps Data Layer features not rendering after 1st feature deletion

Question

I am trying to allow a user to draw a shape in Google Maps using the map.data features layer. As soon as the user finishes drawing, I want to process the coordinates of the shapes they just drew and then immediately remove it from the map. The first shape deletes fine, but after the first they still process and appear to empty out of the object (tested by using the map.data.toGeoJson to log it to the console where it shows the map.data object but with no features present) but they are still visible on the map.

To see what is happening, in the fiddle draw a polygon and on completion (double click) it disappears because it is deleted after processing (which is what should happen). However, when a second or more polygons are drawn they stay visible on the map.

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  map.data.setControls(['Point', 'LineString', 'Polygon']);

  map.data.addListener('addfeature', function(event) {
    event.feature.getGeometry().forEachLatLng(function(latLng) {
      //do stuff with the feature
    });

    map.data.remove(event.feature);
  });
}

Fiddle: https://jsfiddle.net/km76tvhp/13/

Answer 1

This is strange behavior and it could possibly be a bug. As a workaround, you could use the Drawing Library. Here is an example below which uses the google.maps.drawing.DrawingManager. It's very similar to drawing using the google.maps.Data class.

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControlOptions: {
      drawingModes: ['marker', 'polygon', 'polyline']
    },
    polygonOptions: {
      editable: true,
      draggable: true,
      strokeColor: 'red'
    }
  });

  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    polygon.getPath().getArray().forEach(function(latLng){
      // do stuff with the feature
    });

    polygon.setMap(null);
  });
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=drawing" async defer></script>