Google Maps Marker Clusterer not showing cluster icons - google-maps

Question

I have a Google Map with a set of markers on. I'm trying to add MarkerClusterer to it to simplify the view. Overall, doing so should be pretty easy from what I've seen online but when I try it, my map doesn't show any markers, clusters or anything. My code is below:
function calculateCenter() {
center = map.getCenter()
}
let center
let worldCenter = new window.google.maps.LatLng(32.249974, 5.800781)
let mapOptions = {
center: worldCenter,
zoom: 3,
scrollwheel: false
}
let map = new google.maps.Map(document.querySelector('.banner--map--parks'), mapOptions)
let infoWindow = new google.maps.InfoWindow()
let markers = []
map.addListener('idle', _ => {
calculateCenter()
})
fetch('/api/parks.json')
.then(response => response.json())
.then(data => {
data.forEach(park => {
if (park.lat && park.lng) {
let title = park.name
let position = new google.maps.LatLng(park.lat, park.lng)
let icon = 'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue.png'
let marker = new google.maps.Marker({
position: position
title: title,
icon: icon,
// map: map
})
let parkIWContent = '<div class="iw">' + park.name + '</div>'
marker.addListener('click', (function(marker, parkIWContent) {
return function() {
infoWindow.setContent(parkIWContent);
infoWindow.open(map, marker);
// map.panTo(new google.maps.LatLng(park.lat, park.lng))
};
})(marker, parkIWContent))
markers.push(marker)
}
})
})
console.log(markers)
let markerCluster = new MarkerClusterer(map, markers)
map.addListener("click", _ => {
infoWindow.close()
})
As you can see, at one point I did output the array of markers and they do all show up in the console but still fail to show on the map.
Can anyone spot any issues with the code that may be causing this?
Thanks

Answer 1

I've actually managed to solve this. I needed to move the Marker Clusterer inside the .then in order for it to work.