Infobubble僅顯示來自通過PHP/Mysql添加的標籤添加的最後一個標記的內容

Question

我一直在試圖讓Infobubbles在使用ajax調用時使用來自Mysql數據庫的標記填充的地圖上的2個選項卡上工作。

問題是每個infobubble都會在添加的最後一個標記中顯示相同的內容。這裏是整個js腳本，非常感謝任何幫助。

 var script = '<script type="text/javascript" src="http://google-maps-' + 
     'utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble'; 
    script += '.js"><' + '/script>'; 
    document.write(script); 

var customIcons = { 
    free: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
    animation: google.maps.Animation.DROP, 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
    }, 
    paid: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
    animation: google.maps.Animation.DROP, 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
    } 
}; 

// End Custom Icons 

var map, infoBubble; 

function initialize() { 
    var myOptions = { 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map'), 
     myOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) 
     { 
     var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 

     var marker = new google.maps.Marker({ 
      map: map, 
      position: pos, 
         icon:'images/markers/you.png', 
         animation: google.maps.Animation.DROP, 
      title: 'Your Location.' 
     }); 

    infoBubble = new InfoBubble({ 
     maxWidth: 300, 
     borderRadius: 10, 
     borderWidth: 1, 
     borderColor: '#2c2c2c', 
     shadowStyle: 1 
    }); 


    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("phpsqlajax_genxml.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 citystate = markers[i].getAttribute("citystate"); 
     var phone = markers[i].getAttribute("phone"); 
     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 + "<br/>" + citystate + "<br/>" + phone; //html inside InfoWindow 
     var description = "<b>" + name + "</b> <br/>" + address + "<br/>" + citystate + "<br/>" + phone; //html inside InfoWindow 
     var icon = customIcons[type] || {}; 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: icon.icon, 
      shadow: icon.shadow, 
      animation: google.maps.Animation.DROP 
     }); 
     bindInfoWindow(marker, map, infoBubble, html, description); 
    } 
    infoBubble.addTab('Tab 1', html); 
    infoBubble.addTab('Tab 2', description); 

    }); 


     map.setCenter(pos); 
     }, function() { 
     handleNoGeolocation(true); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(false); 
    } 
    } 


    function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
     var content = 'Error: The Geolocation service failed.'; 
    } else { 
     var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
     map: map, 
     position: new google.maps.LatLng(60, 105), 
     content: content 
    }; 

    var infoBubble = new google.maps.infoBubble(options); 
    map.setCenter(options.position); 
    } 

// Additional functions related to the DB Listing function 

function bindInfoWindow(marker, map, infoBubble, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    //infoBubble.setContent(html); 
    infoBubble.open(map, marker); 
    }); 
} 

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

    function addTab() { 
    var title = document.getElementById('tab-title').value; 
    var content = document.getElementById('tab-content').value; 

    if (title != '' && content != '') { 
     infoBubble.addTab(title, content); 
    } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

，設置這取決於該標記的內容的代碼被註釋掉：

//infoBubble.setContent(html); 

爲此創建的最後一個信息窗口的內容始終顯示。在標記點擊谷歌地圖信息窗口

working example, including the tab content

Answer 2

問題●當點擊一個標記它打開信息窗口的標籤，但是當上一個標記再次單擊則oepns與標籤，但prevoius選項卡上的信息窗口沒有關閉herte是代碼

google.maps.event.addListener（標記， '點擊'，（功能（標記，contentString）{ 恢復功能（）{

      infoBubble.addTab('Tab 1', contentString); 
          infoBubble.addTab('Tab 2', contentString12); 
          infoBubble.setContent(contentString); 
          infoBubble.close('Tab 1', contentString); 
          infoBubble.open(map,marker);