javascriptreactjsgoogle-mapsreact-google-maps

Can't display DrawingManager ("did you include prop libraries={[drawing']} in the URL? undefined")


I am trying to display the DrawingManager on my Map but I keep getting this error

Did you include prop libraries={['drawing']} in the URL? undefined
invariant
C:/Users/summo/Documents/GitHub/pint-web-frontend/node_modules/invariant/browser.js:38
new DrawingManager
C:/Users/summo/Documents/GitHub/src/components/drawing/DrawingManager.tsx:72
  69 | constructor(props: DrawingManagerProps) {
  70 |   super(props)
  71 | 
> 72 |   invariant(
     | ^  73 |     !!google.maps.drawing,
  74 |     `Did you include prop libraries={['drawing']} in the URL? %s`,
  75 |     google.maps.drawing
View compiled
▶ 17 stack frames were collapsed.
then
C:/Users/summo/Documents/GitHub/src/useJsApiLoader.tsx:54
  51 |   return
  52 | } else {
  53 |   loader.load().then(function then() {
> 54 |     setLoaded(true)
     | ^  55 |   })
  56 |   .catch(function onrejected(error) {
  57 |     setLoadError(error)
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

Here is my current code for it:

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

const containerStyle = {
    width: "100%",
    height: "600px",
};

function MyComponent(props) {
    return (
        <LoadScript
            googleMapsApiKey="API_KEY"}
        >
            <GoogleMap
                mapContainerStyle={containerStyle}
                center={{
                    lat: props.lat_centro,
                    lng: props.long_centro,
                }}
                zoom={16}
            >
                {/* Child components, such as markers, info windows, etc. */}
                <DrawingManager />
                <></>
            </GoogleMap>
        </LoadScript>
    );
}

export default React.memo(MyComponent);

Haven't found any documentation that can help with this and got an assigment to hand over in 3 hours. Someone save me please

Ignore: "It looks like your post is mostly code; please add some more details." "It looks like your post is mostly code; please add some more details." "It looks like your post is mostly code; please add some more details."


Solution

  • Fixed by guess: had to add libraries={["drawing"]} to the LoadScript props. I tried everywhere else before posting here.