react-google-maps icon indicating copy to clipboard operation
react-google-maps copied to clipboard
verified publisher icon visgl

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

Open jacobsamo opened this issue 5 months ago • 6 comments

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

jacobsamo avatar Jul 27 '25 06:07 jacobsamo

The id prop of the map was never intended to be used this way, but I can totally understand your expectation. I'll have to think if there'll be any negative consequences from actually adding it to the map html-element.

(personally I think terra-draw is wrong requiring an id to be set on any specific element, which is likely going to stop working at some point)

usefulthink avatar Jul 29 '25 10:07 usefulthink

I agree with this too, I am unsure of why terra-draw requires the id prop, as it shouldn't be need to interact with the map itself. But for the id prop on the html-element i guess I would expect that, but also not sure on how often you would use such a thing.

Pretty sure if you create a map doing the following:

const element = document.getElementById("google-maps-container")

const map = google.maps.Map(element, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
})

It will set the id into the html element when you get it via map.getDiv()

jacobsamo avatar Jul 29 '25 10:07 jacobsamo

The div is created here: https://github.com/visgl/react-google-maps/blob/bed6ccd31911ac82decc758bd4ecee0a18fe492f/src/components/map/index.tsx#L228-L241

So, we could probably just add the id to that div-element there when an id is specified. That shouldn't interfere with anything else, and I don't see it limiting the way it works in the future.

Would you be up to create a PR for this?

usefulthink avatar Jul 29 '25 12:07 usefulthink

Sure can, do you mind assigning me to this issue and I will get right onto it

jacobsamo avatar Jul 29 '25 23:07 jacobsamo

So added in a simple mapDiv.id = id ? `${id}-map` : 'default-map'; here: https://github.com/visgl/react-google-maps/commit/04f49cd743b1f131777a507142efd8d708d95746. However, none of the props set with mapDiv. seem to be working like it gets overridden somehow. Do you know much about this?

jacobsamo avatar Jul 30 '25 02:07 jacobsamo

Ah, I forgot about the extra div we created to be able to unmount and remount map instances. I think the id should only be added to the mapDiv itself, and only if the id is actually specified in the props.

usefulthink avatar Aug 01 '25 14:08 usefulthink