使用XML / SQL标记将集群添加到Google Map

Question

I currently have a SQL table with a list of locations and they are populated onto a Google Map.

Id like to cluster the markers as shown in this demo: http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/examples/advanced_example.html ?

My map script is as followed:

 <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![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 < 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 = "<h3><center>" + name + "</center></h3>" + "<b>Day Ticket: </b>" + dayticket + "</br>" + "<b>Club Membership: </b>" + clubmembership + "</br></br>" + "<b>Water Type: </b>" + watertype + "</br>" + "<b>Disabled Access: </b>" + disabledaccess + "</br>" + "<b>Contact Details: </b>" + contactdetails + "</br>" + "<b>Address: </b>" + address + "</br>" + "<b>Last Updated: </b>" + 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() {}

    //]]>
  </script>

Answer 1

Several things to note:

You will want to include the clusterer utility library in your scripts, here: http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js

The docs here ( http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html ) have some good examples of how to implement the clusterer. Whether your marker data comes from SQL, XML, or anywhere else should not matter. As you create new marker objects, you need to be able to pass them in to a MarkerClusterer object.