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."
CodePudding user response:
Fixed by guess: had to add libraries={["drawing"]}
to the LoadScript props. I tried everywhere else before posting here.