visgl / visgl/react-google-maps

[Bug] Map crashes on Android WebView

Open
#918 9 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.