How to modify google maps clustering algorithm / options - google-maps

Question

I have 500+ markers on my javascript google map and working on adding clustering.
Having issues setting some simple options and custom images using
js-markerclusterer Public Github library.
Following this Google developer guide guide and adding the library using CDN
I expected to set my options like this:
const clusterOptions = {
imagePath: "<imagepath>",
gridSize: 30,
zoomOnClick: false,
maxZoom: 10,
};
const markerCluster = new markerClusterer.MarkerClusterer({ map, markers, clusterOptions});
This has no effect on the clusters.
What is the correct way of setting cluster options?
Here is a bigger snippet of my code:
function initMap() {
// Create the map.
var lastWindow = null;
var markers = new Array();
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
keyboardShortcuts: false,
center: { lat: 40.748817, lng: -73.985428 },
disableDefaultUI: true,
gestureHandling: "greedy",
ClickableIcons: false,
styles: mapStyle,
restriction: {
latLngBounds: NEW_YORK_BOUNDS,
strictBounds: true
},
});
const markers_map = {{markers_map | tojson | safe}};
const infowindow = new google.maps.InfoWindow();
// Create markers.
for (let i = 0; i < markers_map.length; i++) {
const currMarker = markers_map[i];
const marker = new google.maps.Marker({
position: {lat: currMarker.lat, lng: currMarker.lng},
map,
animation: google.maps.Animation.DROP,
icon: currMarker.icon
});
marker.addListener("click", () => {
if (lastWindow) {lastWindow.close()};
lastWindow = infowindow;
const _id = currMarker._id;
const name = currMarker.name;
const url_link = currMarker.url_link;
const address = currMarker.address;
const neighborhood = currMarker.neighborhood;
const from_day = currMarker.from_day;
const to_day = currMarker.to_day;
const from_hours = currMarker.from_hours;
const to_hours = currMarker.to_hours;
const content = `
<div class=infowindow>
<div class=infowindow__imagecontainer>
<img class=infowindow__image src=${url_link} alt=HappyHour img>
</div>
<div class=infowindow__content onclick=nextpage()>
<h2 class=markers__name>${name}</h2><p class=markers__neighborhood>In ${neighborhood}</p>
<div class=markers__section>
<p class=markers__address>${address}</p>
{{ map("container__map") }}
</div>
<div class=infowindow__output>
<div class=output__details>${from_day}</div>
<div class=output__details>${to_day}</div>
<div class=output__details>${from_hours}</div>
<div class=output__details>${to_hours}</div>
</div>
<div class=infowindow__next>
{{ click("container__click") }}
<p>Click to see more</p>
</div>
<div>
<form name=infowindow--form id=next action=/location/${_id}></form>
</div>
` ;
infowindow.open({
anchor: marker,
map,
shouldFocus: false,
});
infowindow.setContent(content)
});
markers.push(marker);
map.addListener('click', () => {
infowindow.close();
});
}
const clusterOptions = {
imagePath: "<imagepath>",
gridSize: 30,
zoomOnClick: false,
maxZoom: 10,
};
const markerCluster = new markerClusterer.MarkerClusterer({ map, markers, clusterOptions});