visgl / visgl/react-google-maps
[Bug] Map instance caching has buggy behavior when used with clustering
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.9k
- Forks
- 193
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 13
Description
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
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 reproducing the navigation flow described with the Map component, reuseMaps={true}, and the marker-clustering example using @googlemaps/markerclusterer. Trace the cluster marker cleanup during navigation between city views and determine why markers from the previous city remain. Done means changing cities no longer leaves cluster markers from earlier views on the cached map.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100