[Bug] Map crashes on Android WebView

Abierto
  • ¿Algo no está bien?
#918 9 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
android, react, typescript
Área
frontend, mobile-dev

Línea de trabajo

Empieza inspeccionando index.tsx:85 y la lógica de useMapInstance() mostrada en el issue; después reproduce el problema con un Android WebView, 150+ Advanced Markers y zoom repetido. El objetivo se cumple cuando el mapa ya no recibe coordenadas no válidas ni se congela o se bloquea durante las actualizaciones de los marcadores y los cambios de centro.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug
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
Lenguaje dominante
TypeScript
Estrellas
1.9k
Forks
192
Merge medio
3 d 7 h
PR fusionados (30 d)
29

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.