Google Maps drawing manager has been deprecated since August 2025, and their advice is to switch to Terra Draw.
I'm using @vis.gl/react-google-maps library to display a map on my react app, it provides :
- the Map component,
- the useMap hook to retrieve the google map instance.
But the 2 libraries don't seem to work together. Terra Draw requires the map instance, but also needs the map div to have an id. The issue is that when I provide the id on the Map component, it's the parent of the div returned by mapInstance.getDiv() that possesses the id (mapInstance is returned by the useMap hook).
Terra Draw raises the following error : Uncaught Error: Google Map container div requires and id to be set
Here is a minimal example to reproduce the issue :
import { TerraDraw, TerraDrawPolygonMode } from "terra-draw"; import { TerraDrawGoogleMapsAdapter } from "terra-draw-google-maps-adapter"; import { Map, useMap } from "@vis.gl/react-google-maps"; import { useEffect } from "react";
const Example = () => { const map = useMap("map");
useEffect(() => { if (!map) { return; }
const terraDraw = new TerraDraw({ adapter: new TerraDrawGoogleMapsAdapter({ map, lib: google.maps }), modes: [new TerraDrawPolygonMode()], }); });
return <Map id="map" />; };