Google Map DrawingManager: How to Delete a Created Shape (ex. circle)? - reactjs

Question

How can I delete a created shape in Google Map DrawingManager?
<DrawingManager
// defaultDrawingMode={google.maps.drawing.OverlayType.}
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
// google.maps.drawing.OverlayType.POLYLINE,
// google.maps.drawing.OverlayType.RECTANGLE,
],
},
circleOptions: {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
draggable: true,
editable: true,
},
polygonOptions: {
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.3,
draggable: true,
editable: true,
},
}}
onOverlayComplete={this.handleOverlayComplete}
/>
When creating an shape via drawing manager (google map), after creating it, I want to delete that one but I'm having difficulties on that one.
ReactJS

Answer 1

To manipulate drawn shapes the following approach could be considered:
introduce shapes variable to keep a reference to drawn shapes:
class Map extends Component {
constructor(props) {
super(props);
this.shapes = [];
}
//...
}
once overlaycomplete event is triggered, save drawn shape:
handleOverlayComplete(e) {
const shape = e.overlay;
shape.type = e.type;
google.maps.event.addListener(shape, "click", () => {
this.toggleSelection(shape);
});
this.toggleSelection(shape);
this.shapes.push(shape)
}
and finally drawn shapes could be deleted from map like this:
deleteShapes() {
this.state.shapes.forEach(shape => shape.setMap(null));
}
Here is a demo for your reference
Note: in the provided demo to delete shapes:
select stop drawing mode by clicking hand cursor button
click map (outside bounds of shape)