Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Newbie - Help with Google Maps MarkerCluster

Status
Not open for further replies.

johnhugh

Technical User
Mar 24, 2010
702
SG
Hi, I'm trying to cluster my markers on Google Maps API v3.
I've taken the example from this page: and try to combine it with the simple marker cluster example from that page.

I don't know what I'm doing wrong, the cluster just won't work.
Been spending hours now, when I know it's something so simple.
Would really appreciate any help.
Thanks!

My code is below:

HTML:
<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Asset Locations</title>
    <script type="text/javascript" src="[URL unfurl="true"]http://maps.googleapis.com/maps/api/js?sensor=false"></script>[/URL]
    [COLOR=#EF2929]<script type="text/javascript" src="markerclusterer.js"></script>[/color]
    <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
	  BOO: {
        icon: '[URL unfurl="true"]http://labs.google.com/ridefinder/images/mm_20_blue.png'[/URL]        
      },
	  CAM: {
        icon: '[URL unfurl="true"]http://maps.google.com/mapfiles/kml/shapes/ranger_station.png'[/URL]       
      } 
    };
		 
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(-15.408193,28.287167),
        zoom: 3,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow; 
	  
      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml2.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("assetno");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
		  var assetdesc = markers[i].getAttribute("assetdesc");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + assetdesc;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,            
	    animation: google.maps.Animation.DROP			
          });
          bindInfoWindow(marker, map, infoWindow, html);		  
	  [COLOR=#EF2929]var markerCluster = new MarkerClusterer(map, markers);[/color]
        }				
      });	  
    }
	
    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>
  </head>
  <body onload="load()">
    <div id="map" style="width: 800px; height: 800px"></div>
  </body>

</html>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top