I have already been through answers which suggest using "polygon.setMap(null)" whenever I want to delete the polygon. But, the polygon in my code is created by drawing manager and I have attached the code snippet below as to how the polygon is drawn. I want to delete it on Double click but I do not have any variable that defines this kind of Polygon. Please help me find a way to delete the polygon on double click. The Onpolygoncomplete feature helps me save arrays of polygon overlay points.
import React, { useState } from "react";
import {LoadScript,GoogleMap,Polygon,DrawingManager} from "@react-google-maps/api";
function Map(){
const [polycoords, setpolycoords] = useState([]);
const onPolygonComplete = async (polygon) => {
var polygonBounds = polygon.getPath();
for (var i = 0; i < polygonBounds.length; i++) {
var point = {
lat: polygonBounds.getAt(i).lat(),
lng: polygonBounds.getAt(i).lng(),
type: type,
};
polycoords.push(point)
}
}
return(
<LoadScript
id="script-loader"
googleMapsApiKey={"1234567890"}
language="en"
libraries= {googleMapsLibraries}
>
<GoogleMap
mapContainerClassName="map"
map="map"
center={{ lat: latitude, lng: longitude }}
zoom={25}
version="weekly"
mapTypeId="satellite"
maxZoom = {40}
options={{
disableDefaultUI: false,
mapTypeId: "satellite",
streetViewControl: false,
zoomControl : false,
mapTypeControl : false,
zoom :25
}}
>
<DrawingManager
onPolygonComplete={onPolygonComplete}
drawingMode={drawingOption}
options={{
drawingControl: true,
polygonOptions: {
editable: true,
draggable: false,
fillColor: movableColor,
strokeColor: movableColor,
fillOpacity: 0,
strokeWeight: 3,
}
}}
/>
<Polygon
paths = {polycoords} //please help me delete this polygon on dbl click. There is option "OnDblClick?" present but I am not sure.
key={2}
editable={true}
options={{
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0,
}}
/>
)
export default Map;