Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
#803 6 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

@jacobsamo đang làm issue này rồi.

Từ ngày 30/7/2025.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
1.9k
Fork
195
Merge trung bình
2 ngày 11 giờ
Pull request đã merge (30 ngày)
14

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của visgl/react-google-maps

Tất cả issue của visgl/react-google-maps

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.