visgl / visgl/react-google-maps

[Bug] - Div Id not set to the div correctly

Open
#803 6 comments 0 reactions 1 assignee View on GitHub

@jacobsamo is already working on this.

Since Jul 30, 2025.

bug
Dominant language
TypeScript
Stars
1.9k
Forks
193
Avg merge
3d 16h
Merged PRs (30d)
13

Description

Description

For some reason, when accessing the map using useMap() and then calling map.getDiv() the id for the div is an empty string even though it's set on the <Map> component.

I found this bug when trying to get Terra Draw to work correctly

<Map
  id="google-map-container"
  defaultCenter={mapOptions.center}
  defaultZoom={mapOptions.zoom}
  defaultBounds={
    mapOptions.bounds &&
    "north" in mapOptions.bounds &&
    "south" in mapOptions.bounds &&
    "east" in mapOptions.bounds &&
    "west" in mapOptions.bounds
      ? mapOptions.bounds
      : undefined
  }
  mapTypeId={map.mapTypeId?.toLowerCase() ?? "hybrid"}
  onZoomChanged={(z) => setZoom(z.detail.zoom)}
  mapId={env.NEXT_PUBLIC_GOOGLE_MAPS_MAPID}
  disableDefaultUI={true}
  onClick={(e) => handleClick(e)}
  gestureHandling="greedy"
  reuseMaps
>
// children
</Map>

A workaround for this is doing map.getDiv().id = "google-map-container"

Steps to Reproduce
  1. Access a map using useMap()
  2. Call map.getDiv() and check the id
  3. Id is an empty string ("") even though it's set on the map itself.
Environment
  • Library version: ^1.5.4
  • Google maps version: weekly
  • Browser and Version: Arc - Based on Chromium version 138.0.7204.158 (Official Build) (arm64)
  • OS: macOS Sonoma - version 14.5
Logs
Browser logs:

drawing-test.tsx:211 Error initializing Terra Draw: Error: Google Map container div requires and id to be set
    at new o (terra-draw-google-maps-adapter.ts:29:10)
    at DrawingTest.useEffect.initializeTerraDrawWhenReady (drawing-test.tsx:95:25)
    at DrawingTest.useEffect (drawing-test.tsx:220:5)
    at Object.react_stack_bottom_frame (react-dom-client.development.js:23637:20)
    at runWithFiberInDEV (react-dom-client.development.js:872:30)
    at commitHookEffectListMount (react-dom-client.development.js:12295:29)
    at commitHookPassiveMountEffects (react-dom-client.development.js:12416:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14337:13)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14330:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14330:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14330:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14330:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14330:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14330:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14330:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14330:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14464:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14330:11)
    at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:14310:11)
    at commitPassiveMountOnFiber (react-dom-client.development.js:14340:11)
error	@	intercept-console-error.ts:44
overrideMethod	@	hook.js:608
DrawingTest.useEffect.initializeTerraDrawWhenReady	@	drawing-test.tsx:211
DrawingTest.useEffect	@	drawing-test.tsx:220
react_stack_bottom_frame	@	react-dom-client.development.js:23637
runWithFiberInDEV	@	react-dom-client.development.js:872
commitHookEffectListMount	@	react-dom-client.development.js:12295
commitHookPassiveMountEffects	@	react-dom-client.development.js:12416
commitPassiveMountOnFiber	@	react-dom-client.development.js:14337
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14340
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14340
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14435
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14408
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14340
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14340
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14340
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14340
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14340
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14340
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14340
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14340
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14464
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310
commitPassiveMountOnFiber	@	react-dom-client.development.js:14330
recursivelyTraversePassiveMountEffects	@	react-dom-client.development.js:14310

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.