[Bug] Compatibility with Terra Draw

[AxelCanton]

Description

As of august 2025, the drawing manager has been deprecated. It is recommended by the google maps documentation to use libraries such as Terra Draw. However it does not seem to be compatible with this library.

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.

Not sure if this should be opened in the Terra Draw project, or if there is any workaround.

Steps to Reproduce

Minimal exemple to reproduce :

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

Environment

• Library version: 1.5.2
• Google maps version: weekly
• Browser and Version: chrome 138.0.7204.49
• OS: Ubuntu 22.04.5

Logs

The error is raised by Terra Draw : Uncaught Error: Google Map container div requires and id to be set

[usefulthink]

Honestly, I've been looking through the terradraw sourcecode and I think the requirement for the map to have an id attribute is something that should be fixed there.

As far as I can tell, the only reason it requires this id is to be able to select some internal div rendered by google maps:

https://github.com/JamesLMilner/terra-draw/blob/b3b60f67710be38f5d882393d3e2035ec58d21d7/packages/terra-draw-google-maps-adapter/src/terra-draw-google-maps-adapter.ts#L262-L264

const div = this._map.getDiv();
const styleDivSelector = `#${div.id} .gm-style > div`;
const styleDiv = document.querySelector(styleDivSelector);

...and that code could be rewritten as

const div = this._map.getDiv();
const styleDiv = div.querySelector('.gm-style > div');

and the id would no longer be required.

Anyone up to create a PR over there?

As a quick fix, you need to add an id to the mapDiv yourself to get this to work:

const Example = () => {
  const map = useMap("map");

  useEffect(() => {
    if (!map) {
      return;
    }

    const mapEl = map.getDiv(); 
    if (!mapEl.id) {
      mapEl.id = 'terradraw-map-id';
    }

    const terraDraw = new TerraDraw({
      adapter: new TerraDrawGoogleMapsAdapter({ map, lib: google.maps }),
      modes: [new TerraDrawPolygonMode()],
    });
  });

  return <Map id="map" />;
};

[usefulthink]

here's an attempt to resolve this upstream: JamesLMilner/terra-draw#650

[AxelCanton]

I noticed that the PR has been merged, thank you for your involvement !