How to remove drawn circle or polygon from google map using drawing manager - ng2-map

Question

How can I remove the drawn circle or polygon using drawing manager from the google map.

Component:

import {Ng2MapComponent, DrawingManager, Polygon} from 'ng2-map';

export class CreateAlertComponent implements OnInit {
   @ViewChild(Ng2MapComponent) mapObj: Ng2MapComponent;
   @ViewChild(DrawingManager) drawingManager: DrawingManager;

   polygonCompleteFunction(e) {
       console.log(this.mapObj);
   };

});

HTML:

<ng2-map [zoom]="mapOptions.zoom" [minZoom]="mapOptions.minZoom" [center]="mapOptions.center" clickable="false" (click)="mapClick($event)">
                    <drawing-manager *ngIf = "selectedJurisdictions.length > 0" 
                        [drawingMode]="'null'"
                        [drawingControl]="true"
                        [drawingControlOptions]="{
                        position: 2,
                        drawingModes: ['circle', 'polygon']
                        }"
                        [circleOptions]="{
                        fillColor: 'red',
                        fillOpacity: 0.3,
                        strokeColor: 'black',
                        strokeWeight: 2,
                        editable: true,
                        draggable: true,
                        zIndex: 1
                        }"
                        [polygonOptions]="{
                        fillColor: 'red',
                        fillOpacity: 0.3,
                        strokeColor: 'black',
                        strokeWeight: 2,
                        editable: true,
                        draggable: true,
                        zIndex: 1
                        }"
                        (polygoncomplete)="polygonCompleteFunction($event)"
                        (circlecomplete)="circleCompleteFunction($event)">
                    </drawing-manager>
</ng2-map>

But on polygon complete function or circle complete I am not getting the drawn polygons from the map object

Answer 1

You can find the drawn Polygon or Circle from the CircleComplete/PolygonCompolete Event's parameter. Or find the target from OverlayComplete event's parameter by event.overlay. After get the target object, you can keep it somewhere for deleteing them somewhere else.

polygonCompleteFunction(e) {
   console.log(e);    // this is the drawn Polygon you are looking for, and same for the circleComplete event
};

overlayComplete(e) {
  console.log(e.overlay);  // here can also find the drawn shape(Polygon/Circle/Polyline/Rectangle)
}

While deleting the target Polygon or Circle, delete them by reference the instance kept before.

target.setMap(null);

Here is the GooleMapApi Documentation about OverlayComplete Events:

google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) { var radius = circle.getRadius(); });

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { if (event.type == 'circle') { var radius = event.overlay.getRadius(); } });

Here is the link to GoogleMapApi documentation.

Hope it helps. And here is a plunker you can take reference.