CODEWITHSUNDEEP
javascriptgoogle-maps-api-3react-google-maps
Tom
Tom

Reputation: 2663

how to change the control position of the drawing manager with the @react-google-maps/api

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

Answers (1)

MrUpsidown
MrUpsidown

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

Related Questions