Google Maps Javascript Api V3 data.remove isn't removing a feature

Question

I'm working on a little pet project to edit personal maps by drawing polygons and am finding that when I call map.data.remove(feature), the feature is removed from map.data but isn't removed from the visual map. Some of the javascript that doesn't relate to the data layer has been omitted. What additional steps, removal, or function calls do I need to actually remove the feature from the map as well?

...
function CustomMapType() {
}
CustomMapType.prototype.tileSize = new google.maps.Size(256,256);
CustomMapType.prototype.maxZoom = 7;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('DIV');
    var baseURL = 'static/tiles/images/';
    var x = ((coord.x % Math.pow(2, zoom))
        + Math.pow(2, zoom)) % Math.pow(2, zoom);
    baseURL += zoom + '_' + x + '_' + coord.y + '.png';
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.backgroundColor = '#1B2D33';
    div.style.backgroundImage = 'url(' + baseURL + ')';
    return div;
};

CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";

var map;
var CustomMapType = new CustomMapType();


//////////     Initializer Functions     //////////

function initialize() {
  var styledMapOptions = { name: "Custom Style" };
  var mapOptions = getMapOptions();
  var data = getDataObject();

  data.addListener("click", function(event) {
    fillFormFromFeature(event.feature);
  });

  data.setStyle(function(feature) {
    var style = featureStyles[feature.getProperty('style')];
    return style
  });


  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  data.setMap(map);

  map.mapTypes.set('custom',CustomMapType);
  map.setMapTypeId('custom');
  map.mapTypes.set(MY_MAPTYPE_ID);
}

function getMapOptions() {
  return {
    minZoom: 0,
    maxZoom: 7,
    isPng: true,
    mapTypeControl: false,
    mapMaker: true,
    streetViewControl: false,
    center: new google.maps.LatLng(65.07,-56.08),
    zoom: 3,
    mapTypeControlOptions: {
      mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
  };
}

function getDataObject() {
  return new google.maps.Data({
    controlPosition: google.maps.ControlPosition.TOP_CENTER,
    controls: ["Point", "Polygon"],
    featureFactory: function(featureGeometry) {
      var date = new Date();
      // TODO add code here for forming polygons.
      var feature = new google.maps.Data.Feature({
        geometry: featureGeometry,
        id: date.getTime(),
        properties: {
          'name': 'none',
          'style': 'new',
          'feature_type': 'new',
          'zIndex': '5000',
        }
      });

      document.forms["feature_form"]["feature_id"].value = feature.getId();

      map.data.add(feature);
      map.data.revertStyle();
      return feature;
    }
  });
}


...

Answer 1

Your code uses 2 different google.maps.Data-instances.

1. the instance returned by getDataObject()
2. the built-in data-property of the Map-instance

When you create a polygon(or another feature)

1. the feature will be automatically added by the featureFactory to the instance returned by getDataObject()
2. the call of map.data.add(feature); adds the feature also to map.data

The result: you have 2 duplicate features, when you call map.data.remove you only remove the feature of map.data.

Solution: you don't need to add the feature on your own, it will be added automatically. But it's not a feature of map.data, it's a feature of the Data-instance returned by getDataObject, so you must call the method remove of this Data-instance:

function initialize() {
  var mapOptions = getMapOptions();
  var data = getDataObject();

  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  data.setMap(map);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementsByTagName('UL')[0]);


}

function getMapOptions() {
  return {
    minZoom: 0,
    maxZoom: 7,
    isPng: true,
    mapTypeControl: false,
    mapMaker: true,
    disableDefaultUI: true,
    center: new google.maps.LatLng(65.07, -56.08),
    zoom: 3
  };
}

function getDataObject() {
  //create a variable to be able to access it from within
  //the featureFactory
  var Data = new google.maps.Data({
    controlPosition: google.maps.ControlPosition.TOP_CENTER,
    controls: ["Point", "Polygon"],
    featureFactory: function(featureGeometry) {

      var date = new Date();
      // TODO add code here for forming polygons.
      var feature = new google.maps.Data.Feature({
        geometry: featureGeometry,
        id: date.getTime(),
        properties: {
          'name': 'none',
          'style': 'new',
          'feature_type': 'new',
          'zIndex': '5000',
        }
      });

      var listItem = document.createElement('li');
      listItem.textContent = [featureGeometry.getType(), feature.getId()].join(' ');
      document.getElementsByTagName('UL')[0].appendChild(listItem);
      google.maps.event.addDomListener(listItem, 'click', function() {
        //remove the feature
        Data.remove(feature);
          //remove the listItem
        this.parentNode.removeChild(this)
      });

      map.data.revertStyle();
      return feature;
    }
  });
  return Data;
}

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

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0
}
ul {
  background: #fff;
}
li {
  padding-right: 12px;list-style-image:url(http://upload.wikimedia.org/wikipedia/commons/5/54/Delete-silk.png);
  cursor: pointer
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas"></div>
<ul></ul>

Answer 2

For removing a polygon from a map you must set :

 yourPolygon.setMap(null);

ps: a minor in your code is show two time the getDataObject function