MarkerClusterer does not group markers

StackOverflow https://stackoverflow.com/questions/21198568

Question

I am trying to use MarkerClusterer to group markers but I don't know why it doesn't work. I see markers shown on the map so I should have the markers created correctly.

Here is my js (the addresses are loaded from a XML):

google.maps.visualRefresh = true;

//LOAD XML DATA
if (window.XMLHttpRequest)
   {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","xml/data1.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
var listNumber=xmlDoc.getElementsByTagName("loc");

//INITIALIZE MAP
var map;
var geocoder;
var markers=[];
var infowindow = new google.maps.InfoWindow();

function initialize() {
    geocoder = new google.maps.Geocoder();
    var taipei = new google.maps.LatLng(25.033611, 121.565000);
    var mapOptions = {
        zoom: 11,
        center: taipei
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    for (var i = 0; i < listNumber.length; i++) {
        var add = listNumber[i].getElementsByTagName("address")[0].childNodes[0].nodeValue;
        addMarkers(i,add);
    }
    var markerCluster = new MarkerClusterer(map, markers);
}

//CREATE MARKERS AND CONTENT OF INFOWINDOWS
function addMarkers(i,address){
    geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {

              var marker = new google.maps.Marker({
                  position: results[0].geometry.location,
                  map: map,
                  title: address,
                  animation: google.maps.Animation.DROP
              });         

              marker.html = '<div id="infowindow">' + address + '<img src="img/img' + [i] + '.jpg"></div>';           

              google.maps.event.addListener(marker, 'click', function(){
                  infowindow.setContent(this.html);
                  infowindow.open(map, this);
              });

              markers.push(marker);

          } else {
          alert('Geocode was not successful for the following reason: ' + status);
          }   
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

Here is my HTML:

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link href="css/style.css" rel="stylesheet" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=zh-TW" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>

<title>practice</title>
</head>

<body>
    <div id="map-canvas"></div>
    <div id="list"></div>
    <script src="js/map1.js"></script>
</body>
</html>
Was it helpful?

Solution

This doesn't work because markers array is empty at line

var markerCluster = new MarkerClusterer(map, markers);

because geocoder.geocode() is asynchronous and needs some time to finish. One "ugly" fix could be just to provide some time that all markers are properly set up. For example:

setTimeout(function() {
    var markerCluster = new MarkerClusterer(map, markers);
}, 500);

And, maybe you will have to lower zoom level to see clustering.

The other solution is to change markerCluster to global variable, move it before for loop:

markerCluster = new MarkerClusterer(map, markers);

for (var i = 0; i < listNumber.length; i++) {
    ...

and change function addMarkers() so that instead of

markers.push(marker);

you call

markerCluster.addMarker(marker);

See example at jsBin.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top