title: Integrate MarkerClusterer with database driven Google Map V3
body: <p>I want to integrate <a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html" rel="nofollow">MarkerCluster</a> with my database driven Google map and have been struggling to get it to work.</p>
  
  <p>The first code example generates a map from a database that already has the multiple markers lat/long.</p>
  
  <p>The second bit of code is a simple version of Marker Cluster.</p>
  
  <p>How can I combine the two? Both are setup for V3 of the api.</p>
  
  <pre><code>    &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(47.6145, -122.3418),
          zoom: 13,
          mapTypeId: 'roadmap'
        });
        var infoWindow = new google.maps.InfoWindow;
  
        // Change this depending on the name of your PHP file
        downloadUrl("&lt;?php bloginfo('stylesheet_directory'); ?&gt;/phpsqlajax_genxml.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 address = markers[i].getAttribute("address");
            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;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + address;
            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>
  
  <p>The example below is Marker Cluster:</p>
  
  <pre><code>var center = new google.maps.LatLng(37.4419, -122.1419);
  var options = {
    'zoom': 13,
    'center': center,
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  };
  
  var map = new google.maps.Map(document.getElementById("map"), options);
  
  var markers = [];
  for (var i = 0; i &lt; 100; i++) {
    var latLng = new google.maps.LatLng(data.photos[i].latitude,
        data.photos[i].longitude);
    var marker = new google.maps.Marker({'position': latLng});
    markers.push(marker);
  }
  var markerCluster = new MarkerClusterer(map, markers);
  </code></pre>