You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 storing the cluster markers in an array stored in useRef in an attempt to be able to remove them when the component unmounts.
returnnewMarkerClusterer({
map,renderer: {render: (cluster,stats,map)=>{constmarkerElem=renderClusterMarker({
cluster,
map,
mapContentType,});// cluster markers are added to the array hereclusterMarkerElems.current.push(markerElem);returnmarkerElem;},},});
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 nullif(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
The text was updated successfully, but these errors were encountered:
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.Then on unmount I'm attempting to remove the cluster markers:
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 runmarkerClusterer.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
Logs
No response
The text was updated successfully, but these errors were encountered: