New Sep 9, 2025

How to make vis.gl react google maps work with Terra Draw

Libraries, Frameworks, etc. All from Newest questions tagged reactjs - Stack Overflow View How to make vis.gl react google maps work with Terra Draw on stackoverflow.com

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 :

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" />; };

Scroll to top