Google Maps API - Clustering Issue - google-maps

Question

I am trying to add clustering to my already working map. However, after multiple attempts I am unable to understand why the clusters do not show. I am wondering if there is either a conflict within the code or if the clustering does not work well with the infowindows or listeners on the map. If at all possible, could you please look through this code and see if you notice any red flags. Much appreciated and thank you in advance!
<script src="markerclusterer.js"></script>
<script>
var customLabel = {
community: {
label: 'C'
},
building2: {
label: 'A'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(40, -90), //This needs to be dynamic based on map location
zoom: 11
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('all_marker_data.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var dlink = markerElem.getAttribute('dlink');
var comm_link = markerElem.getAttribute('comm_link');
var target = markerElem.getAttribute('target');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = '<div>'+
'<h5>'+
'<a href="'+
comm_link+
'"'+
'target="'+
target+
'"'+
'>'+
name+
'</a>'+
'</h5>'+
'</div>'+
'<div>'+
'<p>'+
address+
'</p>'+
'</div>'+
'<div>'+
'<a href="'+
dlink+
'" target="_new">'+
'Get Directions >></a>'+
'</div>'+
'</div>';
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'images/m'});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap">
</script>
If there is any other information that could help answer this question please let me know and I can try my best to provide that information. Thank you!

Answer 1

It's look like a images problem.
On the code, you have the imagePath point to folder called "images", and icons (cluster) must name "m1.png", "m2.png", ..., "m5.png". Check if that exist.
This link may helps: https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=es#agregar-un-agrupador-de-marcadores-en-clsteres.
Regards!