I have a map, using ng-map directive, I also have a <drawing-manager> which allows me to draw shapes on the map.

I just want to allow my user to draw one polygon on map, here is my HTML:

<div ng-controller="CreateOrderController as vm" map-lazy-load=""
         map-lazy-load-params="{{googleMapsUrl}}">
        <ng-map zoom="4" center="33.134394, 53.664248"
                map-type-id="ROADMAP">
            <drawing-manager
                    on-overlayplete="vm.onMapOverlayCompleted()"
                    drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}"
                    drawingControl="true"
                    drawingMode="null">
            </drawing-manager>
        </ng-map>
    </div>

This is my controller:

var vm = this;


$scope.googleMapsUrl=";sensor=false&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: 
    vm.map.setMap(null);
};

The deletePolygon function returns an error:

Uncaught TypeError: vm.map.setMap is not a function

I know that map object does not contain setMap function, but Google docs says I can remove a polygon shape using setMap(null)

Any idea about how to remove/delete the polygon shape?

I have a map, using ng-map directive, I also have a <drawing-manager> which allows me to draw shapes on the map.

I just want to allow my user to draw one polygon on map, here is my HTML:

<div ng-controller="CreateOrderController as vm" map-lazy-load="https://maps.google./maps/api/js"
         map-lazy-load-params="{{googleMapsUrl}}">
        <ng-map zoom="4" center="33.134394, 53.664248"
                map-type-id="ROADMAP">
            <drawing-manager
                    on-overlayplete="vm.onMapOverlayCompleted()"
                    drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}"
                    drawingControl="true"
                    drawingMode="null">
            </drawing-manager>
        </ng-map>
    </div>

This is my controller:

var vm = this;


$scope.googleMapsUrl="https://maps.googleapis./maps/api/js?key=myKeyIsHere&sensor=false&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./maps/documentation/javascript/examples/polyline-remove
    vm.map.setMap(null);
};

The deletePolygon function returns an error:

Uncaught TypeError: vm.map.setMap is not a function

I know that map object does not contain setMap function, but Google docs says I can remove a polygon shape using setMap(null)

Any idea about how to remove/delete the polygon shape?

• javascript
• angularjs
• google-maps

• Please have you an idea about this error? Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined – Ne AS Commented May 2, 2017 at 23:31
• @Llg could you please take a look at the defined answer. Does it help you? – Mohammad Kermani Commented May 3, 2017 at 10:07
• Thank you I have solved the problem :) Can you please take a look of this stackoverflow./questions/43748609/draw-polygon-using-ngmap – Ne AS Commented May 3, 2017 at 10:09
• @Llg Perfecto! Good that answer solved your problem – Mohammad Kermani Commented May 3, 2017 at 10:46
• 1 Okay I will :) and thank you sooo much – Ne AS Commented May 4, 2017 at 15:31

2 Answers 2

The callback function of the overlayplete event is passed a parameter of type google.maps.drawing.OverlayCompleteEvent, which according to the docs has overlay parameter, referencing to the newly created object. You need to call .setMap(null) on that object. So your code should look something like this:

vm.onMapOverlayCompleted = function(e){
    var shapePath= e.overlay.getPath().getArray();  //This returns an array of drawn polygon cordinates

    e.overlay.setMap(null); //this will delete any created shape (polygon, polyline, etc) right after it is created. If you want to instead delete it later, just store the reference to overlay and call setMap(null) on it later.
};

Try this , clearMap() will delete all your polygon , circle , line from map

        NgMap.getMap({id: 'mapId'}).then(function (map) {
            $scope.map = map;
        }).catch(function (map) {
            console.error('map error: ', map);
        });

        $scope.onMapOverlayCompleted = onMapOverlayCompleted;
       $scope.clearMap = clearMap;

       function onMapOverlayCompleted(e) {
            $scope.map = e;
       }

       function clearMap() {
            if ($scope.map.overlay) {
                $scope.map.overlay.setMap(null);
            }
        }