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

i'm working on little pet project edit personal maps drawing polygons , finding when call map.data.remove(feature), feature removed map.data isn't removed visual map. of javascript doesn't relate data layer has been omitted. additional steps, removal, or function calls need remove feature map 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 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;     }   }); }   ... 

your code uses 2 different google.maps.data-instances.

1. the instance returned getdataobject()
2. the built-in data-property of map-instance

when create polygon(or feature)

1. the feature automatically added featurefactory instance returned getdataobject()
2. the call of map.data.add(feature); adds feature map.data

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

solution: don't need add feature on own, added automatically. it's not feature of map.data, it's feature of data-instance returned getdataobject, must call method remove of 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 variable able access 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 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 feature          data.remove(feature);            //remove 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>