Reputation: 2663
I'm trying to change the position of the drawing manager control panel (the one that lets the user select what shape to draw).
However, I'm having difficulties doing so.
I figured that the position values google.maps.ControlPosition.TOP_CENTER
are just numbers. So according to the docs I'm trying to pass in the position object similar to the example here
<DrawingManager
onLoad={this.handleLoadDrawing}
drawingMode="rectangle"
onOverlayComplete={(e)=>console.log(e.overlay.bounds)}
options={
{
position: google.maps.ControlPosition.TOP_CENTER
}
}
/>
I also tried drawingControlOptions
instead of options
but no difference. What am I doing wrong? I created a codesandbox here.
Upvotes: 0
Views: 2013
Reputation: 22490
I am really no React expert and as it seems they can't provide one working example in the official docs, I am not too sure how it should be done.
The official solution I believe is here: https://react-google-maps-api-docs.netlify.app/#usejsapiloader but I could not get this to work.
So far, the only way I was able to get your above code working was by doing 2 things: 1) move the drawing manager to a separate component, and 2) use /* global google */
in the component.
/* global google */
import React from "react";
import { DrawingManager } from "@react-google-maps/api";
const DrawingComponent = () => {
const onLoad = (drawingManager) => {
console.log("drawingManager", drawingManager);
};
const onPolygonComplete = (polygon) => {
console.log("polygoncomplete", polygon);
};
return (
<DrawingManager
onLoad={onLoad}
onPolygonComplete={onPolygonComplete}
options={{
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT,
drawingModes: [google.maps.drawing.OverlayType.POLYGON]
},
polygonOptions: { editable: true }
}}
/>
);
};
export default DrawingComponent;
Working code sandbox: https://codesandbox.io/s/quizzical-poitras-i9rg3?file=/src/DrawingCmp.js
Upvotes: 3