[Bug] - Div Id not set to the div correctly
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ả
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
- Access a map using
useMap() - Call
map.getDiv()and check the id - 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
- Không có Dockerfile hay tệp Docker Compose
- Không có mẫu pull request
- Đọc hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- 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.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của visgl/react-google-maps
-
bug needs more info
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 45/100
visgl/react-google-maps#1039 · 1 bình luận ·
Maintainer thường phản hồi trong vòng 2 ngày
-
bug
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 35/100
visgl/react-google-maps#918 · 9 bình luận ·
Maintainer thường phản hồi trong vòng 2 ngày
-
bug
Độ khó 4/5 3-5 ngày Mức phù hợp với người mới 45/100
visgl/react-google-maps#905 ·
Maintainer thường phản hồi trong vòng 2 ngày
-
google maps issue
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 45/100
visgl/react-google-maps#889 · 1 bình luận ·
Maintainer thường phản hồi trong vòng 2 ngày
-
bug
Độ khó 3/5 1-2 ngày Mức phù hợp với người mới 35/100
visgl/react-google-maps#884 · 1 bình luận ·
Maintainer thường phản hồi trong vòng 2 ngày
Tất cả issue của visgl/react-google-maps
Issue tương tự
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
microsoft/vscode-livepreview#876 ·
Maintainer thường phản hồi trong vòng 1 ngày
-
needs-triage
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 90/100
JustJarethB/invoicer#54 ·
-
ICP 1.2.0 shows a scheduled task's interval in milliseconds under the label "Interval (In seconds)"Đang mởNeeds Triage Type/Bug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
wso2/product-integrator#2585 ·
Maintainer thường phản hồi trong vòng 1 ngày
-
Add: Telemundo West sdĐang mởcheck:passed streams:add
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
Maintainer thường phản hồi trong vòng 1 ngày
-
design
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
MTES-MCT/monitor-field#119 ·
Maintainer thường phản hồi trong vòng 1 ngày