Custom Overlay not positioned correctly

[emaborsa]

I am working with React, Typescript and Google Maps CustomOverlay. The idea is to allow the user to draw lines on the map, here a Sandbox.

The problem is that the canvas is rendered with the top-left corner in the middle of the map:

And so the user cant draw line in the left or upper side of the map:

I searched on the web but did not find a solution. Any hint to stretch the overlay over the whole (displayed) map?

[usefulthink]

First off, it looks like you're in the wrong project here :)
You should probably post this question here instead: https://github.com/JustFly1984/react-google-maps-api

The origin point of the overlayLayer pane is always in the center of the map when resting. If you want to change that, you can translate your canvas-element using canvas.style.transform = 'translate(-50%, -50%)' for example. See here: https://codesandbox.io/p/sandbox/crazy-sinoussi-2zgp53

As a hint, doing something like this with the OverlayView will get really complicated really fast. Since the OverlayView itself isn't anchored geographically (it doesn't have latitude/longitude), so it jumps around when you move the map. When the map is moved, you can either move the canvas so it stays where it belongs or you have to update everything within the canvas to cancel out map-movement.

If all you need is simple lines or polygons, have a look at the google.maps.Polyline and google.maps.Polygon classes (those can be set to "editable", see here: https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes) or the google.maps.drawing library (https://developers.google.com/maps/documentation/javascript/examples/drawing-tools).

[emaborsa]

Oh, I apologize. I will move to that repo.
Thanks.