js-markerclusterer icon indicating copy to clipboard operation
js-markerclusterer copied to clipboard

[BUG] hide/show advanced markers does not work

Open vicb opened this issue 2 years ago • 9 comments

Environment details

I am using the beta channel of Google Maps and @googlemaps/markerclusterer at 2.1.3

I am adding a bunch of marker to a clusterer:

      for (const launch of this.launches) {
        markers.push(
          new google.maps.marker.AdvancedMarkerElement({
            position: { lat: launch.lat, lng: launch.lon },
            title: launch.title,
          }),
        );
      }
      this.clusterer.addMarkers(markers);
      this.clusterer.setMap(this.map);

At this point everything works fine.

Then I hide the markers:

      this.clusterer.setMap(null);

After that all the markers are hidden as expected

Then I want to show the markers again:

      this.clusterer.setMap(this.map);
      this.clusterer.render(); // calling that makes no difference

That has no effect. I would effect the marker the show after this call. But I have to zoom (either in on out) for the marker to re-appear.

I would be up to create a repro if you have a starter template - all the GMaps starters for the JS API website seem to have an issue with the API key.

vicb avatar May 21 '23 08:05 vicb

If you would like to upvote the priority of this issue, please comment below or react with :+1: so we can see what is popular when we triage.

@vicb Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:

This is an automated message, feel free to ignore.

wangela avatar May 21 '23 08:05 wangela

I have done a screencast of the issue. You can see that when I re-enable the sites nothing happens until I zoom on the map.

Also I tried to setMap(null) / setMap(map) on an advanced marker and it works well w/o the Clusterer -see this jsfiddle

vicb avatar May 21 '23 18:05 vicb

Good afternoon. Same problem. Already have a solution?

novakand avatar Jul 27 '23 13:07 novakand

Was there ever a fix for this? I am having the same issue.

askurat avatar Jan 04 '24 05:01 askurat

Did a little debugging on this. The MarkerClusterer.clusters array is being emptied when MarkerClusterer.setMap() is called, regardless of whether it's being called with map or null. Not sure why this would be happening since as far as I can tell MarkerClusterer.setMap() is just OverlayView.setMap(), which should just add and remove the overlay from the map. I would think the members of the MarkerClusterer instance would remain intact, but that doesn't seem to be the case.

amuramoto avatar Jan 04 '24 20:01 amuramoto

A workaround is to iterate MarkerClusterer.clusters and call setMap on each Cluster.marker rather than on MarkerClusterer:

clusterer.clusters.map(cluster => cluster.marker.setMap(null))
clusterer.clusters.map(cluster => cluster.marker.setMap(map))

See ln 47-53 of this jsFiddle.

amuramoto avatar Jan 04 '24 20:01 amuramoto

@amuramoto your fiddle is working as expected but in my code I am receiving a ts error. I have attached the screenshot below. Any way to work around this?

Screenshot 2024-03-01 at 12 55 46 PM

t53m1 avatar Mar 01 '24 07:03 t53m1

I got it working by ignoring the warnings/errors. This does hide the markers and clusters, but once you zoom in/out, they rerender

t53m1 avatar Mar 01 '24 07:03 t53m1

Hello, any news on this ?

FlorianBruniaux avatar Apr 04 '24 16:04 FlorianBruniaux