How to remove drawn polygon on Google map

Question

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.com/maps/api/js"
         map-lazy-load-params="{{googleMapsUrl}}">
        <ng-map zoom="4" center="33.134394, 53.664248"
                map-type-id="ROADMAP">
            <drawing-manager
                    on-overlaycomplete="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.com/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.com/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?

Please have you an idea about this error? Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined — Ne AS, May 02 '17 at 23:31
@Llg could you please take a look at the defined answer. Does it help you? — Mohammad Kermani, May 03 '17 at 10:07
Thank you I have solved the problem :) Can you please take a look of this http://stackoverflow.com/questions/43748609/draw-polygon-using-ngmap — Ne AS, May 03 '17 at 10:09
Please how can I display a polygon in this map. I have all the coordinates and I want to let the user delete the old polygon (edit mode) and draw the new one? — Ne AS, May 04 '17 at 12:22
@Llg Do you use Angular ngmap or you're just using Google SDK on your website? — Mohammad Kermani, May 04 '17 at 15:06
@Llg I will let you know, I am just on my holiday and I don't have access to the project source code, or git server right now. Please keep searching, if you could not find the answer, mention me in next two days. I will help you then. — Mohammad Kermani, May 04 '17 at 15:14

score 7 · Accepted Answer · answered Aug 08 '16 at 10:46

7

The callback function of the overlaycomplete 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.
};

answered Aug 08 '16 at 10:46

Matej P.

5,303
1
28
44

I was playing with overlay, but I did not saw the function that time, and I was looking for `setMap` function in `e` object :) Thank you, very good answer and useful – Mohammad Kermani Aug 08 '16 at 10:55
When I tried, after overlay complete, the drawing manager options to draw the shapes have gone, but no change for the already drawn shapes. – Sanjay Kumar N S Mar 20 '17 at 07:16
Please have you an idea about this error? `Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined` – Ne AS May 02 '17 at 23:31

score 0 · Answer 2 · answered Sep 29 '17 at 03:58

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);
            }
        }

How to remove drawn polygon on Google map

2 Answers2

Linked