わかりました私は、ajax呼び出しでMysqlデータベースから回復した、多くのマーカーが取り込まれたマップ上のタブでInfobubblesを実装しようとしました( Googleのこのチュートリアルで構築されました)。
クリックイベントはすべてのマーカーにうまく反応していますが、問題は、最後に追加されたマーカーから、すべてのインフォバブルがタブに同じ html コンテンツを表示していることです...閉鎖の問題があるに違いありませんが、瞬間、これは私を夢中にさせています! あなたが提供できる助けをありがとう...
function init() {
var mapCenter = new google.maps.LatLng(48.204612, 7.419058);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoBubble = new InfoBubble({
map: map,
maxWidth: 300,
disableAnimation: true
});
// Get markers and info from the database
downloadUrl("phpsqlajax_genxml3.php", 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 address = markers[i].getAttribute("address");
var description = markers[i].getAttribute("description");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
title: name,
position: point,
icon: icon.icon,
shadow: icon.shadow,
});
google.maps.event.addListener(marker, 'click', function() {
if (!infoBubble.isOpen()) {
infoBubble.open(map, this);
}
});
google.maps.event.addListener(map, "click", function(){
infoBubble.close();
});
}
infoBubble.addTab('Tab1', html);
infoBubble.addTab('Tab2', description);
});
}