Google Maps API - How to display an info window for a Marker Cluster on click using MarkerClustererOptions and onClusterClick?

Question

How do you use MarkerClustererOptions and OnClusterClick (with OnClusterClickHandler) to display an info window when a Marker Cluster is clicked, instead of zooming in (the default behavior)? I'm trying to understand this documentation: https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html.

Am I using the right version of MarkerClusterer? zoomOnClick: false does not solve this issue like examples online (they could be outdated though). I am using

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

to import the script in my html code. See full js code below:

// Request needed libraries.
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { LatLng } = await google.maps.importLibrary("core");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

//Global Vars
let map;
let markers = [];
let markerCluster;

//Project Marker Variables
let projectName =[];
let year = []; //string
let artist =[]; 
let location = []; //in words
let description = [];
let lat = [];
let long =[];

var icon = {
  url: "assets/icon.png", // url
  scaledSize: new google.maps.Size(50, 50), // scaled size
  origin: new google.maps.Point(0,0), // origin
  anchor: new google.maps.Point(0, 0) // anchor
};



async function readData() {
  d3.csv("data/data.csv").then(function(data) {
    data.forEach(function(d) {
      projectName.push(d.Project_Name);
      year.push(d.Year);
      artist.push(d.Artist);
      location.push(d.Location);
      description.push(d.Description);
      lat.push(d.Latitude);
      long.push(d.Longitude);
    });
    

    for (var z=0; z < lat.length; z++) {
      markers[z] = new google.maps.Marker({
        icon: icon,
        position: new google.maps.LatLng(lat[z], long[z]),
        map: map,
        title: projectName[z],
        year: year[z],
        artist: artist[z],
        location: location[z],
        description: description[z],
      });
    }

    
    // Create an info window to share between markers.
    //CLICK WINDOW
    const infoWindow = new InfoWindow();
    //MOUSEOVER WINDOW
    const mouseWindow = new InfoWindow();
    const clusterWindow = new InfoWindow();

    


    // Add a marker clusterer to manage the markers.
    const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });
    //How to open an info window on clicking the cluster?




    
    // Add a click listener for each marker, and set up the info window.
    for (let r = 0; r < markers.length; r++) {
      markers[r].addListener("click", ({ domEvent, latLng }) => {
      const { target } = domEvent;
      infoWindow.close();
      infoWindow.setContent("Title: "+markers[r].title+"<br/>Year: "+markers[r].year+"<br/>Artist: "+markers[r].artist+"<br/>Location: "+markers[r].location+"<br/>Description: "+markers[r].description);
      infoWindow.open(markers[r].map, markers[r]);
      });

      markers[r].addListener("mouseover", ({ domEvent, latLng}) => {
        const {target} = domEvent;
        mouseWindow.close();
        mouseWindow.setContent("Title: "+markers[r].title+"<br/>Artist: "+markers[r].artist);
        mouseWindow.open(markers[r].map, markers[r]);
      });

      markers[r].addListener("mouseout", ({ domEvent, latLng}) => {
        const {target} = domEvent;
        mouseWindow.close();
      });
    }

    });
  }



async function init() {

  map = new Map(document.getElementById("map"), {
    zoom: 2,
    center: { lat: 37.4239163, lng: -122.0947209 },
    mapId: "KEY",
    mapTypeControl: false,
    });

  readData();

    

  }

init();

Tried to use zoomOnClick : false in options, does not work.

Answer 1

The zoomOnClick option in the MarkerClustererOptions object does not prevent the default behavior of zooming in when a cluster is clicked. Instead, you need to use the onClusterClick option to specify a callback function that will be called when a cluster is clicked. This callback function can then be used to open an info window.

The following code shows how to use the onClusterClick option to open an info window when a cluster is clicked:

const markerCluster = new markerClusterer.MarkerClusterer({
    map,
    markers,
    onClusterClick: (cluster) => {

        // Open an info window with the cluster's center 
        // and the number of markers in the cluster.
        const infoWindow = new InfoWindow({
            content: `Cluster center: ${cluster.center_}, Number of markers: ${cluster.getMarkers().length}`,
        });
        
        infoWindow.open(map, cluster);
    },
});