Draw polygons on Google Map

[emaborsa]

Hi,
I have a SPA, React + Typescript and have added google maps. Now I need to allow the user to draw lines/polygons on it, something like that:

I tried to use a CustomOverlay, but the problem is that it starts from the center, so it is not possible to draw in the other quadrant of the map:

As a result, the user should be able to draw everywhere on the map, the drawings have to stick with the map, it means by dragging the map, the lines have to follow:

move_with.mp4

A user suggested me to transform the canvas canvas.style.transform = 'translate(-50%, -50%)', but then the lines are not correctly positioned and zooming doesnt work as expected.

Here a sandbox of what I did so far (use your api key).

Please need help, at least some hints how to achieve it.
Thanks.