On reset button click how to reset drawing manager?

Question

I want to reset the drawing manager.

If I use data.setMap(null) then the drawing manager is reset but I want to reset polygon when I click on the reset button. I want to implement add /edit /delete/ and view functionality. On edit polygon when I fetch old record and edit that record after that if I click on reset button then Old polygon and new polygon both is displayed.

let polygonArray = [];
const onAdd = (data) => {
  const path = data.getPath();

  var pathArray = [];
  for (var i = 0; i < path.length; i++) {
    pathArray = [path.getAt(i).lat(), path.getAt(i).lng()];
    polygonArray.push(pathArray);
  }
  //data.setMap(null);
  console.log("onAdd", polygonArray);
};

const MyMapComponent = compose(
  withProps({
    googleMapURL:
      "https://maps.googleapis.com/maps/api/js?key=" +
      googleApiKey +
      "&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `500px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) => {
  if (props.isEdit) {
    polygonArray = props.alreadyExistCity.map((coordinateItem) => {
      // console.log(coordinateItem);

      return { lat: coordinateItem[0], lng: coordinateItem[1] };
    });
  }
  return (
    <GoogleMap defaultZoom={12} center={props.mapCenter}>
      {props.isEdit && polygonArray.length > 0 ? (
        <Polygon
          path={polygonArray}
          options={{
            strokeWeight: 2,
            fillColor: "#000",
            fillOpacity: 0.4,
          }}
        />
      ) : (
        <DrawingManager
          defaultOptions={{
            drawingControl: true,
            drawingControlOptions: {
              drawingModes: ["polygon"],
            },

            polygonOptions: {
              strokeWeight: 2,
              fillColor: "#000",
              fillOpacity: 0.4,
              clickable: true,
              editable: true,
              zIndex: 1,
            },
          }}
          onPolygonComplete={onAdd}
        />
      )}
    </GoogleMap>
  );
});

Answer 1

You can use some_shape.setPaths([]) to earse the shape. For example,

onPolygonComplete={(polygon)=>polygon.setPaths([])}

Would erase the polygon the instant it finishes