Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
#803 6 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 2 días

@jacobsamo ya está trabajando en esto.

Desde el 30/7/2025.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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
Lenguaje dominante
TypeScript
Estrellas
1.9k
Forks
195
Merge medio
2 d 11 h
PR fusionados (30 d)
14

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de visgl/react-google-maps

Todos los issues de visgl/react-google-maps

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.