Combine Geocode With Marker Clustering

How to use MarkerCluster with geolocations from a database, displaying markers on the map works fine. but I haven't been able to implement marker clustering. Any help would be appr

Solution 1:

You are creating a new MarkerCluster every time you create a marker. Create it once, add all the markers to the same MarkerClusterer object.

functioninitMap() {
  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 = newMarkerClusterer(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);
      })
    });
  });
}

proof of concept fiddle

code snippet:

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="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><markerid="91"name="marcos centeno"phone="2083128603"email="marcoscenteno89@gmail.com"address="16111 17th st Heyburn 83336"service="residential"host=""/><markerid="90"name="Nathan Rasmussen"phone="123"email="nathan@truckmaster.com"address="290 west 125 south Idaho falls 83404"service="residential"host=""/><markerid="87"name="LIZ SANZON"phone="4564352410"email="lizeth.sanzon@dynamitewireless.com"address="20491 N Main ST, CAREY 83320"service="residential"host=""/><markerid="88"name="Liz Sanzon"phone="9674546465"email="lizeth.sanzon@dynamitewireless.com"address="244700 Ustick Rd, Wilder 83676"service="commercial"host=""/><markerid="89"name="Lizeth Sanzon"phone="4564352410"email="lizeth.sanzon@dynamitewireless.com"address=" 5870 Rock River Lane Kuna 83634"service="residential"host=""/><markerid="78"name="Ryan Rustici"phone="2087052118"email="ryan.rustici@gmail.com"address="11324 Interlaaken Dr SW Lakewood 98498"service="both"host=""/><markerid="86"name="Liz San"phone="31546304501"email="lizeth.sanzon@dynamitewireless.com"address="283 n 2600 e Roberts ID"service="residential"host=""/><markerid="77"name="Ryan Rustici"phone="2085551212"email="ryan@aol.com"address="4035 Ross Ave Ammon 83406"service="residential"host=""/><markerid="84"name="Marcos Centeno"phone="2083128603"email="marcoscenteno89@gmail.com"address="785 Garfield Ave, 10 Idaho Falls 83401"service="residential"host=""/><markerid="85"name="Marcos Centeno"phone="2083128603"email="mc172000@yaho.com"address="785 Garfield Ave, 10 Idaho Falls 83401"service="residential"host="199-33-218-234.cpe.safelink.net"/></markers>';
</script><scriptsrc="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>