谷歌地圖標記集羣顯示相同infowindow

Question

我一直堅持這個很長的時間。我創建了一個使用php從mysql數據庫中提取數據的地圖。一切都很好，我得到每個標記的信息窗口。我添加了可以正常工作的集羣代碼。現在它只在點擊標記時顯示相同的信息框。我曾嘗試過在本網站發佈的與我的問題相關的解決方案，但似乎無法找到解決方案。任何幫助，將不勝感激

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

試試這個

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));