You are creating a new MarkerCluster
every time you create a marker. Create it once, add all the markers to the same MarkerClusterer
object.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(43.6191, -113.9772),
zoom: 8
});
var infoWindow = new google.maps.InfoWindow;
// ********************************************************************************
// ** move the markers array and the marker clusterer here, outside of the loop. **
// ********************************************************************************
var markers = [];
var markerCluster = new MarkerClusterer(map, [], {
imagePath: "https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m"
});
downloadUrl('http://map.northwestdatacom.com/xml.php', function(data) {
var xml = data.responseXML;
var xmlmarker = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(xmlmarker, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var phone = markerElem.getAttribute('phone');
var email = markerElem.getAttribute('email');
var host = markerElem.getAttribute('host');
var type = markerElem.getAttribute('service');
var address = markerElem.getAttribute('address');
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name;
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address;
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
var locations = results[0].geometry.location;
var marker = new google.maps.Marker({
position: locations,
label: icon.label
});
markers.push(marker);
markerCluster.addMarker(marker);
})
});
});
}
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<script>
var customLabel = {
residential: {
label: 'R'
},
commercial: {
label: 'C'
},
both: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(43.6191, -113.9772),
zoom: 6
});
var infoWindow = new google.maps.InfoWindow;
var markers = [];
var markerCluster = new MarkerClusterer(map, [], {
imagePath: "https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m"
});
// downloadUrl('http://map.northwestdatacom.com/xml.php', function(data) {
var xml = parseXml(xmlStr); // data.responseXML;
var xmlmarker = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(xmlmarker, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var phone = markerElem.getAttribute('phone');
var email = markerElem.getAttribute('email');
var host = markerElem.getAttribute('host');
var type = markerElem.getAttribute('service');
var address = markerElem.getAttribute('address');
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name;
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address;
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
var locations = results[0].geometry.location;
var marker = new google.maps.Marker({
position: locations,
label: icon.label
});
markers.push(marker);
markerCluster.addMarker(marker);
})
});
// });
}
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() {}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('MicrosoftXMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
};
google.maps.event.addDomListener(window, "load", initMap);
var xmlStr="<markers><marker id="91" name="marcos centeno" phone="2083128603" email="[email protected]" address="16111 17th st Heyburn 83336" service="residential" host=""/><marker id="90" name="Nathan Rasmussen" phone="123" email="[email protected]" address="290 west 125 south Idaho falls 83404" service="residential" host=""/><marker id="87" name="LIZ SANZON" phone="4564352410" email="[email protected]" address="20491 N Main ST, CAREY 83320" service="residential" host=""/><marker id="88" name="Liz Sanzon" phone="9674546465" email="[email protected]" address="244700 Ustick Rd, Wilder 83676" service="commercial" host=""/><marker id="89" name="Lizeth Sanzon" phone="4564352410" email="[email protected]" address=" 5870 Rock River Lane Kuna 83634" service="residential" host=""/><marker id="78" name="Ryan Rustici" phone="2087052118" email="[email protected]" address="11324 Interlaaken Dr SW Lakewood 98498" service="both" host=""/><marker id="86" name="Liz San" phone="31546304501" email="[email protected]" address="283 n 2600 e Roberts ID" service="residential" host=""/><marker id="77" name="Ryan Rustici" phone="2085551212" email="[email protected]" address="4035 Ross Ave Ammon 83406" service="residential" host=""/><marker id="84" name="Marcos Centeno" phone="2083128603" email="[email protected]" address="785 Garfield Ave, 10 Idaho Falls 83401" service="residential" host=""/><marker id="85" name="Marcos Centeno" phone="2083128603" email="[email protected]" address="785 Garfield Ave, 10 Idaho Falls 83401" service="residential" host="199-33-218-234.cpe.safelink.net"/></markers>";
</script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>
solved Combine Geocode with marker clustering