Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
enure opened this issue Dec 3, 2024 · 0 comments
Open
Labels
bug Something isn't working

Comments

@enure
Copy link

enure commented Dec 3, 2024

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

@enure enure added the bug Something isn't working label Dec 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant