After creating a MarkerClusterer unable to register 'mouseover' event on the clusterer object

[Ubaid-ur-Rehman]

this.googleInfoWindowInvisibleMarkers =new MarkerClusterer({ map : this.map, markers:this.clusterMarkers , renderer : renderer });

this.googleInfoWindowInvisibleMarkers.addListener('mouseover', (cluster) => {
  infoWindow.close();
  let content = '<div id="hover-element">';
  for (let i = 0; i < cluster.length; i++) {
    content += `${cluster[i].title} <br/>`;
  }
  content += '</div>';
  infoWindow.setContent(content);
  infoWindow.open(cluster.getMap(), cluster);
  this.googleMapLastHoverInfoWindow = infoWindow;
});

I want to show some data in the info window after creating the clusterer but the event is not being registered.

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with 👍 so we can see what is popular when we triage.

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

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[Ubaid-ur-Rehman]

Any update on this issue?

[Ubaid-ur-Rehman]

@wangela Still waiting for response.

[usefulthink]

The Markerclusterer itself doesn't provide any events for clusters and/or markers except for the clusteringbegin / clusteringend and click events.

What you can do is provide your own renderer implementation to the Markerclusterer that will create the cluster markers with the event-handlers set up. Just as a simple example:

import {DefaultRenderer} from '@googlemaps/js-markerclusterer';

class RendererWithEvents extends DefaultRenderer {
  render(cluster: Cluster, stats: ClusterStats, map: google.maps.Map): Marker {
    const marker = super.render(cluster, stats, map);

    // handle events for the newly created marker
    marker.addListener('mouseover', () => {
      console.log('cluster hovered!', cluster) 
    });

    return marker;
  }
}

const clusterer = new MarkerClusterer({ 
  map, 
  markers, 
  renderer: new RendererWithEvents() 
});