Question

I have a Google Maps implementation which uses the Google Maps Utility Library v3 (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html) for clustering markers. It works perfectly.

Now though, I want to add infowindows to the markers. The cluster markers work fine as they are, so I want to keep the behaviour on those (i.e. they zoom in when you click them) but when a normal single marker is clicked I want to display an infowindow.

The complete code is as follows:

var _iconCenter = new google.maps.MarkerImage('/css/img/map-marker.png',
  new google.maps.Size(38, 48),
  new google.maps.Point(0,0),
  new google.maps.Point(19, 44));

var shadow = new google.maps.MarkerImage('/css/img/map-marker-shadow.png',
  new google.maps.Size(57, 49),
  new google.maps.Point(0,0),
  new google.maps.Point(7, 44));

var _icon = '/css/img/map-marker-purple.png';
var infowindow;
var markersArray = [];
var map;
var currentPosition = 0;
var currentmarker;
var firstload = true;
var maploaded = false;
var interval = 5000;
var geocoder;

var stylez = [];


function initialize(items,loop,zoom) {
  geocoder = new google.maps.Geocoder();
  if (items.length > 0) {
    var latlng = new google.maps.LatLng(items[0].Lat, items[0].Lng);
    var myOptions = {
      zoom: zoom,
      center: latlng,
      //mapTypeControl: false,
      streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map"), myOptions);
    map.setOptions({styles: stylez});

    for (var i = 0; i < items.length; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(items[i].Lat, items[i].Lng),
        title: items[i].Title,
        icon: _icon,
        shadow: shadow,
        infocontent: items[i].Description
      });
      marker.setMap(map);
      markersArray.push(marker);
    }


    //set style options for marker clusters (these are the default styles)
    mcOptions = {
      gridSize: 44
    }

    var markerCluster = new MarkerClusterer(map, markersArray, mcOptions);
    google.maps.event.addListener(map, "tilesloaded", function () {
      if(loop == true){
        SetLoop();
      }
    });

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

  }
}


function SetLoop() {
//This will fire everytime map loads or recenteres
  maploaded = true;
  if (firstload) {
    firstload = false;
    Recenter();
  }
}

function Recenter() {
  //If previous iteration is not loaded completely, wait to avoid errors
  //It could happen for slow internet connection
  if (maploaded) {
    maploaded = false;
  } else {
    //keep adding 1 second to interval for slow connection till page loads
    interval = interval + 1;
    setTimeout("Recenter()", interval);
    return;
  }

  if (infowindow != null && currentmarker != null) {
    //currentmarker.icon = _icon;
    currentmarker.icon = _iconCenter;
    currentmarker.setMap(map);
    infowindow.close(map, currentmarker);
  }

  markersArray[currentPosition].icon = _iconCenter;
  markersArray[currentPosition].setMap(map);
  map.setCenter(new google.maps.LatLng(markersArray[currentPosition].getPosition().lat(), markersArray[currentPosition].getPosition().lng()));

  infowindow = new google.maps.InfoWindow({
    content: markersArray[currentPosition].infocontent,
    size: new google.maps.Size(50, 50)
  });
  infowindow.open(map, markersArray[currentPosition]);
  currentmarker = markersArray[currentPosition];
  if (currentPosition >= markersArray.length - 1) {
    currentPosition = 0;
  } else {
    currentPosition++;
  }
  if (markersArray.length > 1) {
    setTimeout("Recenter()", interval);
  }
}

As you can see, for demonstration purposes only, I’m calling a crude alert event on the marker click listener, but it’s not firing at all. Just nothing happens when I click a normal marker and there are no errors in the developer tools console of the browser. I’m wondering if it’s something to do with having another event listening to the map loading, but I’m at the edge of my understanding of this and without any errors I’m struggling to know how to debug it.

Can anyone point me in the right direction to get this working?

Thanks folks!

Answer 1

I think that the problem is that you hand the markers over to the clusterer before adding the event listener. Try adding the listener as soon as the marker has been created, so that when you pass the markersArray to the clusterer the event listteners are already attached.
So try:

for (var i = 0; i < items.length; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(items[i].Lat, items[i].Lng),
        title: items[i].Title,
        icon: _icon,
        shadow: shadow,
        infocontent: items[i].Description
      });
      marker.setMap(map);

      //attach the listener now, before pushing into the array
      attachListener(marker,'marker:'+i);
      markersArray.push(marker);
    }

and then:

    function attachListener(marker,content){
        google.maps.event.addListener(marker, "click", function () {
//      alert('test');
        infowindow.setContent(content);
        infowindow.open(map,this);
        });

    }