Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Bug] Map instance caching has buggy behavior when used with clustering

Abierto
  • ¿Algo no está bien?
#627 1 comentario 2 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 3 días

Nadie ha tomado este issue todavía.

Evaluación

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

Línea de trabajo

Empieza reproduciendo el flujo de navegación descrito con el componente Map, reuseMaps={true} y el ejemplo de agrupación de marcadores que usa @googlemaps/markerclusterer. Rastrea la limpieza de los marcadores de clúster durante la navegación entre vistas de ciudades y determina por qué permanecen los marcadores de la ciudad anterior. Se considera terminado cuando cambiar de ciudad ya no deja marcadores de clúster de vistas anteriores en el mapa almacenado en caché.

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

Descripción

bug
Description

I'm implementing an application that has a view /cities which allows you to view all cities on a google map. You can then navigate to view a specific cities at /cities/[id]. Each city then has markers for EV chargers in the city. The EV charger markers are clustered.

If I enable map instance caching via reuseMaps={true} I run into issues where cluster markers remain on the map as you navigate from one city to another. It's not obvious as you have to zoom out in order to see cluster markers from multiple cities.

I'm using @googlemaps/markerclusterer and the implementation follows the marker-clustering example in this repo.

I'm storing the cluster markers in an array stored in useRef in an attempt to be able to remove them when the component unmounts.

    return new MarkerClusterer({
      map,
      renderer: {
        render: (cluster, stats, map) => {
          const markerElem = renderClusterMarker({
            cluster,
            map,
            mapContentType,
          });
          // cluster markers are added to the array here
          clusterMarkerElems.current.push(markerElem);
          return markerElem;
        },
      },
    });

Then on unmount I'm attempting to remove the cluster markers:

  useEffect(() => {
    return () => {
      // This does not throw an error, but it does not seem to work 
      clusterMarkerElems.current.forEach((clusterMarkerElem) => {
        clusterMarkerElem.setMap(null);
      });
      setMarkers({});
      // markerClusterer is always null
      if (markerClusterer) {
        markerClusterer?.clearMarkers();
      }
    };
  }, []);

The code in the cleanup function does not throw an error, but it also doesn't work. I have a guess that the <Map> component is already removed by the time the cleanup function runs. If I run markerClusterer.clearMarkers() when the view loads it doesn't remove the stranded markers as I don't think it knows they exist.

Steps to Reproduce

See description.

Environment
  • Library version: 1.4.2
  • Google maps version: weekly
  • Browser and Version: Firefox latest
  • OS: macOS
Logs

No response

Lenguaje dominante
TypeScript
Estrellas
1.9k
Forks
195
Merge medio
2 d 18 h
PR fusionados (30 d)
15

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.