How to render a Drawing manager in a Map or a polygon using "@react-google-maps/api"

Question

I've been trying to render a Map using @react-google-maps/api": "^2.12.1 in my react-hook-form": "^7.33.1. The requirement was to show the map onClick of the input, and the user should draw a polygon on the Map using Drawing Manager.

This is my code, I've been trying to get this working from past two days and I'm nowhere near to the solution. I've gone through stack overflow questions but most of the answers were outdated or I couldn't find anything since most of the people are using react-google-maps where it has been completely redesigned to @react-google-maps/api": "^2.12.1.

The weird thing is the exact code is working in codesandbox. I don't know what I'm doing wrong here.

import React from "react";
import ReactDOM from "react-dom";
import { LoadScript, GoogleMap, DrawingManager } from "@react-google-maps/api";

const containerStyle = {
  width: "400px",
  height: "400px",
};

const API_KEY = "";

export default function GoogleMaps() {
  const [state, setState] = React.useState({
    drawingMode: "polygon",
  });

  const noDraw = () => {
    setState(function set(prevState) {
      return Object.assign({}, prevState, {
        drawingMode: "maker",
      });
    });
  };

  return (
    <div className="App">
      <LoadScript
        id="script-loader"
        googleMapsApiKey={API_KEY}
        libraries={["drawing"]}
        language="en"
        region="us"
      >
        <GoogleMap
          mapContainerClassName={containerStyle}
          center={{
            lat: 38.9065495,
            lng: -77.0518192,
          }}
          zoom={10}
          version="weekly"
        >
          <DrawingManager
            drawingMode={state.drawingMode}
            options={{
              drawingControl: true,
              drawingControlOptions: {
                drawingModes: ["polygon"],
              },
              polygonOptions: {
                fillColor: `#2196F3`,
                strokeColor: `#2196F3`,
                fillOpacity: 0.5,
                strokeWeight: 2,
                clickable: true,
                editable: true,
                draggable: true,
                zIndex: 1,
              },
            }}
            onPolygonComplete={(poly) => {
              /*const polyArray = poly.getPath().getArray();
              let paths = [];
              polyArray.forEach(function(path) {
                paths.push({ latitude: path.lat(), longitude: path.lng() });
              });
              console.log("onPolygonComplete", polyArray);*/
              console.log("onPolygonComplete", poly);
              noDraw();
            }}
            /*onOverlayComplete={poly => {
              const polyArray = poly.getPath().getArray();
              let paths = [];
              polyArray.forEach(function(path) {
                paths.push({ latitude: path.lat(), longitude: path.lng() });
              });
              console.log("onOverlayComplete", polyArray);
            }}*/
          />
        </GoogleMap>
      </LoadScript>
    </div>
  );
}

Answer 1

I know that it has been a while since you have asked this question but I ran into the same issue with the drawing manager and I believe that this is happening due to you using react v18+

The DrawingManager comp is being restricted by your React.StrictMode and it is causing the comp to not work correctly. I found this other post that explains it in more detail here. Basically, you have to use "DrawingManagerF" or get rid of React.StrictMode. Hope this helps!