Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
#803 6 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

@jacobsamo ci sta già lavorando.

Dal 30/7/2025.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

bug
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
Lingua principale
TypeScript
Stelle
1.9k
Fork
195
Merge medio
2g 18h
PR unite (30g)
15

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di visgl/react-google-maps

Tutte le issue di visgl/react-google-maps

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.