Infobubble只显示通过PHP/Mysql添加的最后一个标记的内容

Question

我一直在尝试让Infobubbles在地图上使用2个选项卡，其中填充了来自Mysql数据库的ajax调用标记。

问题是每个信息泡泡都在标签中显示相同的内容，从最后添加的标记开始。这是整个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);

因此总是显示最后创建的信息窗口的内容。

工作示例，包括制表内容

Answer 2

Q问题在谷歌地图信息窗口的标记点击时，点击下一个标记它打开信息窗口的标签，但当再次点击下一个标记，它打开信息窗口的标签，但以前的标签没有关闭这里是代码

google.maps.event。addListener(marker， 'click'， (function(marker, contentString) {)返回函数(){

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