title: Add cluster to Google Map with XML/SQL Markers
body: <p>I currently have a SQL table with a list of locations and they are populated onto a Google Map.</p>
  
  <p>Id like to cluster the markers as shown in this demo: <a href="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/examples/advanced_example.html" rel="nofollow">http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/examples/advanced_example.html</a>?</p>
  
  <p>My map script is as followed:</p>
  
  <pre><code> &lt;script src="http://maps.google.com/maps/api/js?sensor=false"
              type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      //&lt;![CDATA[
  
      var customIcons = {
        restaurant: {
          icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
          shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
        },
        bar: {
          icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
          shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
        }
      };
  
      function load() {
        var map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(51.854018, 0.974768),
          zoom: 11,
          mapTypeId: 'hybrid'
        });     
  
        var infoWindow = new google.maps.InfoWindow;
  
        // Change this depending on the name of your PHP file
        downloadUrl("phpsqlajax_genxml3.php", function(data) {
          var xml = data.responseXML;
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i &lt; markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var dayticket = markers[i].getAttribute("dayticket");
            var clubmembership = markers[i].getAttribute("clubmembership");
            var address = markers[i].getAttribute("address");
            var contactdetails = markers[i].getAttribute("contactdetails");
            var watertype = markers[i].getAttribute("watertype");
            var disabledaccess = markers[i].getAttribute("disabledaccess");
            var lastupdated = markers[i].getAttribute("lastupdated");
            var type = markers[i].getAttribute("type");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
            var html = "&lt;h3&gt;&lt;center&gt;" + name + "&lt;/center&gt;&lt;/h3&gt;" + "&lt;b&gt;Day Ticket: &lt;/b&gt;" + dayticket + "&lt;/br&gt;" + "&lt;b&gt;Club Membership: &lt;/b&gt;" + clubmembership + "&lt;/br&gt;&lt;/br&gt;" + "&lt;b&gt;Water Type: &lt;/b&gt;" + watertype + "&lt;/br&gt;" + "&lt;b&gt;Disabled Access: &lt;/b&gt;" + disabledaccess + "&lt;/br&gt;" + "&lt;b&gt;Contact Details: &lt;/b&gt;" + contactdetails + "&lt;/br&gt;" + "&lt;b&gt;Address: &lt;/b&gt;" + address + "&lt;/br&gt;" + "&lt;b&gt;Last Updated: &lt;/b&gt;" + lastupdated;
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
              map: map,
              position: point,
              icon: icon.icon,
              shadow: icon.shadow
            });
            bindInfoWindow(marker, map, infoWindow, html);
          }
        });
      }
  
      function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
          infoWindow.setContent(html);
          infoWindow.open(map, 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() {}
  
      //]]&gt;
    &lt;/script&gt;
  </code></pre>