Question

I have been stuck on this for ages. I have created a map that pulls the data from a mysql database with php. Everything was fine and I was getting info windows for each marker. I added code for clustering which works fine. Now it only shows the same information box when clicking on the marker. I have tried solutions posted on this site related to my problem, but can’t seem to find a solution. Any help would be appreciated

var customIcons = {
  BB: {
    icon: '/assets/img/bb-icon.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  SC: {
    icon: '/assets/img/sc-icon.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  BOTH: {
    icon: '/assets/img/both-icon.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
};

function load() {
    var cluster = [];
  var map = new google.maps.Map(document.getElementById("maplocation"), {
    center: new google.maps.LatLng(<?php echo $coord; ?>),
    zoom: 9,
    mapTypeId: 'roadmap'
  });
  var infowindow = new google.maps.InfoWindow();

  // Change this depending on the name of your PHP file
  downloadUrl("/generate-coords.php?map=<?php echo $_GET['area']; ?>", 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 thetitle = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var farmno = markers[i].getAttribute("farmno");
        var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
        var html = '<b>' + name + '</b> <br />' + address+ '<br /><a href="/fulldetails.php?farmno=' + farmno + '">More Details</a>';
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
           map: map,
           position: point,
           icon: icon.icon,
           shadow: icon.shadow,
           title:thetitle,
           content:html
          });
       google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent('<div style=height:80px;overflow:none>'+html+'</div>');
                        infowindow.open(map, this);
                    }
                })(marker, i));
             cluster.push(marker);
         }

        var markerClustererOptions = {   
           maxZoom: null,
           gridSize: 15 ,   
          title: 'Click to zoom in and see farms.'
         };  
    var mc = new MarkerClusterer(map,cluster,markerClustererOptions);
  });
}

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() {}`

Answer 1

Try this

google.maps.event.addListener(marker, 'click', (function(marker, i, html) {
    return function() {
        infowindow.setContent('<div style=height:80px;overflow:none>'+html+'</div>');
        infowindow.open(map, marker);
})(marker, i, html));