visgl / visgl/react-google-maps
[Bug] Map crashes on Android WebView
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.9k
- Forks
- 193
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 13
Description
Description
Hello Everyone,
Recently we moved to use react-google-maps library, and we are displaying around 120-200 Advanced Markers.
The logic is straightforward, we have an on-idle listener in the map -> we trigger a call to the backend -> backend respond with set of markers that we can use to create an Advanced Marker.
The Advanced Marker we create is an HTML component that might contain an svg with a text next to it and all wrapped inside a div tag
Once you zoom in and out multiple times and load the markers multiple times, randomly the map crashes and the whole webview crashes. in the console we see the following error:
setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lng: Infinity is not an accepted value
I saw similar logic in the component useMapInstance()
setTimeout(() => map.setCenter(map?.getCenter()!), 0);
So what it looks like is that the map is becoming undefined once we have the reuseMaps turned on but once I turned it off -> the map at some point reset to the initial center value.
I considered moving to visgl deck gl but couldn't add markers with HTMLElements there. (Should have more documentation to see if it's possible)
Steps to Reproduce
I'm working on creating a demo but you will require android studio to build the mobile app.
You need a simple webview in Android
Map component with 150+ Advanced Marker.
OnIdle listener that changes those Advanced markers.
zooming in and out will cause a grey area in the map and the whole web view become freezed.
https://github.com/user-attachments/assets/47596801-538c-4e6b-ba7f-f10dd1fcb886
Environment
- Library version: 1.7.1
- Google maps version: weekly
- Browser and Version: 'Mozilla/5.0 (Linux; Android 15; 23078PND5G Build/AP3A.240617.008; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/144.0.7559.109 Mobile Safari/537.36'
- OS: Android
Logs
InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lng: Infinity is not an accepted value
(anonymous) @ index.tsx:85
_.Fm @ main.js:176
_.Rm @ main.js:180
(anonymous) @ main.js:200
(anonymous) @ map.js:98
(anonymous) @ map.js:132
nh @ map.js:121
(anonymous) @ map.js:58
release @ map.js:127
Kn @ map.js:116
Ml @ common.js:178
Ml @ common.js:175
Mka @ common.js:64
Toa.qh._.Dq.Lm @ common.js:182
r @ index.tsx:85
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by inspecting index.tsx:85 and the useMapInstance() logic shown in the issue, then reproduce with an Android WebView, 150+ Advanced Markers, and repeated zooming. Done means the map no longer receives invalid coordinates or freezes/crashes during marker updates and center changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, react, typescript
- Domain
- frontend, mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100