いくつかのマーカーとマーカークラスターを含むマップがあり、正常に機能しています。それらにInfoBoxを追加しましたが、機能しますが、問題は、ズームアウトしてInfoBoxが開いていると、マーカーが消え(そしてマーカークラスターに追加され)、ボックスがそこにとどまり、下にマーカーが表示されないことです。
ズームの変更時にすべてのインフォボックスを閉じるという簡単な解決策で作業できましたが、それを達成することさえできません. 私が抱えている問題は、何らかの理由でリスナー内でマーカーにアクセスできないことです。これが私のコードです:
var infoList = [];
function initialize() {
var mapOptions = {
...
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var imageUrl = 'pin.png';
var markers = [];
var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(51, 71));
for (var i = 0; i < data.photos.length; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng,
icon: markerImage,
title: dataPhoto.photo_title
});
boxText = document.createElement("div"),
infoboxOptions = {
alignBottom:true,
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-60, -70),
zIndex: null,
boxStyle: {
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
markers.push(marker);
markers[i].infobox = new InfoBox(infoboxOptions);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
markers[i].infobox.open(map, this);
map.panTo(latLng);
}
})(marker, i));
}
var markerCluster = new MarkerClusterer(map, markers);
google.maps.event.addListener(map, 'zoom_changed', function(markers){
/*Here markers is undefined*/
if (! markers.length) { return; }
for (i in markers) {
markers[i].infoBox.close();
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);