title: How to remove drawn polygon on Google map
body: <p>I have a map, using <a href="https://github.com/allenhwkim/angularjs-google-maps" rel="nofollow">ng-map</a> directive, I also have a <a href="https://ngmap.github.io/#/!drawing-manager.html" rel="nofollow"><code>&lt;drawing-manager&gt;</code></a> which allows me to draw shapes on the map.</p>
  
  <p>I just want to allow my user to draw one polygon on map, here is my HTML:</p>
  
  <pre><code>&lt;div ng-controller="CreateOrderController as vm" map-lazy-load="https://maps.google.com/maps/api/js"
           map-lazy-load-params="{{googleMapsUrl}}"&gt;
          &lt;ng-map zoom="4" center="33.134394, 53.664248"
                  map-type-id="ROADMAP"&gt;
              &lt;drawing-manager
                      on-overlaycomplete="vm.onMapOverlayCompleted()"
                      drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}"
                      drawingControl="true"
                      drawingMode="null"&gt;
              &lt;/drawing-manager&gt;
          &lt;/ng-map&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This is my controller:</p>
  
  <pre><code>var vm = this;
  
  
  $scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key=myKeyIsHere&amp;sensor=false&amp;libraries=drawing";
      NgMap.getMap().then(function(map) {
          vm.map = map;
  });
  
  
  vm.onMapOverlayCompleted = function(e){
      var shapePath=e.overlay.getPath().getArray();  //This returns an array of drawn polygon cordinates
  
      //Just for example, here I want to delete the drawn polygon:
      $scope.deletePolygon();
  };
  
  
  $scope.deletePolygon = function() {
      //According to Google's docs: https://developers.google.com/maps/documentation/javascript/examples/polyline-remove
      vm.map.setMap(null);
  };
  </code></pre>
  
  <p>The <code>deletePolygon</code> function returns an error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: vm.map.setMap is not a function</p>
  </blockquote>
  
  <p>I know that map object does not contain <code>setMap</code> function, but <a href="https://developers.google.com/maps/documentation/javascript/shapes#polygon_remove" rel="nofollow">Google docs</a> says I can remove a polygon shape using <code>setMap(null)</code></p>
  
  <p>Any idea about how to remove/delete the polygon shape?</p>