Help converting old version to the new one please

[morrow95]

trafficstars

First issue is I'm not sure how I can set the zoomOnClick, gridSize, etc in the new version. I am able to get my markers to show though on the map.

/*//set marker clusterer
markerCluster = MarkerClusterer(map, markers,
    {
        zoomOnClick: false,
        gridSize: 50,
        imagePath: '/assets/img/gmaps/clusterplus/m',
        title: 'Multiple Entries'
    }
);
*/

//edited 02-19-22 to markerClusterer.MarkerClusterer from markerClusterer (see notes about using the npm downloaded version at https://www.npmjs.com/package/@googlemaps/markerclusterer)
markerCluster = new markerClusterer.MarkerClusterer({ map, markers });

Second issue is I don't understand how to use the new 'onClusterClick' way. I was previously using a listener for this which no longer works with the new version. https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html goes into the options of the new version and mentions a 'onClusterClick', but I haven't been able to get it to do anything.

/*
//no longer works with new version
//marker clusterer click
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
    //close any open windows
    infowindow.close();
    
    //if zoom is less than max show just zoom in
    if(map.getZoom() < map.maxZoom ){
        map.setCenter(cluster.center_);
        map.setZoom(map.getZoom() + 2);
    }
    //show custom window with multiple ip address details
    else {
        //get markers length
        var markersLength = cluster.getMarkers().length;
        
        var detailContent = '<b class="fw6 text-primary">' + cluster.getMarkers().length + ' IP Addresses :</b><br/><br/>'+                         
            '<div>'+
                '<ul class="list-unstyled m-0">'+
                    //'<li><b class="fw6">City :</b> '+cluster.getMarkers()[0].entry_city+'</li>'+
                    //'<li><b class="fw6">Location :</b> '+cluster.getMarkers()[0].entry_location+'</li>'+
                    '<li><b class="fw6">City, Location :</b> '+(cluster.getMarkers()[0].entry_city ? cluster.getMarkers()[0].entry_city : 'n/a')+', '+(cluster.getMarkers()[0].entry_location ? cluster.getMarkers()[0].entry_location : 'n/a')+'</li>'+
                    '<li><b class="fw6">Postal Code :</b> '+cluster.getMarkers()[0].entry_postal+'</li>'+
                    '<li><b class="fw6">Country :</b> '+cluster.getMarkers()[0].entry_country+'</li>'+
                '</ul>'+
            '</div>'+
            '<hr/>';
        
        for (var i=0; i < markersLength; i++)
        {
            detailContent += ''+
                '<div>'+
                    '<ul class="list-unstyled">'+
                        '<li><b class="fw6">IP Address :</b> '+cluster.getMarkers()[i].entry_ip+'</li>'+
                        '<li class="mb-10"><b class="fw6">Number of entries :</b> '+cluster.getMarkers()[i].entry_total+'</li>'+
                    '</ul>'+
                '</div>';
        }
        
        var info = new google.maps.MVCObject;
        info.set('position', cluster.center_);
        infowindow.setContent(detailContent);
        infowindow.open(map, info);
    }
});
*/

Any help or clarification would be appreciated.

[jpoehnelt]

@morrow95 Thank you for opening this issue. 🙏 Please check out these other resources that might be applicable:

• Support Console - If you have a support contract.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag
• Google Maps Platform issue trackers

This is an automated message, feel free to ignore.

[morrow95]

Stackoverflow setup with basically the same information / question : https://stackoverflow.com/questions/71190140/google-js-markerclusterer-updating-code-from-markerclusterer-plus.

[morrow95]

Okay, I made some progress with this.

markerCluster = new markerClusterer.MarkerClusterer({ map, markers, onClusterClick });

function onClusterClick(cluster) {
    ...
}

1 - Is there no way to get the length of the cluster that was clicked? Previous version allowed cluster.getMarkers().length, but this new version doesn't appear to offer anything unless I am missing it.

2 - Is there no way to get information from the cluster that was clicked? Previous version allowed 'cluster.getMarkers()' that allowed me to pull and display data from that specific cluster.

[jpoehnelt]

onClusterClick is a convenience method. You can move click logic to the renderer instead, this provides access to precomputed cluster stats and the cluster object (which contains an array of markers).