Информация о выпадающем маркере / окно / пузыри для карт Google

Question

Я пытаюсь добавить выпадающий список к существующей карте Google php mysql на основе этого:

Я хочу иметь возможность выбрать [bar_name] и для карты открыть соответствующую инфопузырьку.

Вот мой код;

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">     
</script> 
<script type="text/javascript" src="/resources/js/mylibs/infobubble.js"></script> 
<script type="text/javascript"> 

var geocoder;
var map;
var infoBubble;
var dropdown = "";
var gmarkers = [];

var hostel_icon = new google.maps.MarkerImage('/resources/hostel_blue_icon.png',
new google.maps.Size(28,32),
new google.maps.Point(0,0),
new google.maps.Point(14,32));

var bar_icon = new google.maps.MarkerImage('/resources/bar_red_icon.png',
new google.maps.Size(28,32),
new google.maps.Point(0,0),
new google.maps.Point(14,32));

var icon_shadow = new google.maps.MarkerImage('/resources/myicon_shadow.png',
new google.maps.Size(45,32),
new google.maps.Point(0,0),
new google.maps.Point(12,32));

var customIcons = {
  hostel: {
    icon: hostel_icon,
    shadow: icon_shadow
  },
  bar: {
    icon: bar_icon,
    shadow: icon_shadow
  }
};

function initialize() {
var latlng = new google.maps.LatLng(12.82364, 26.29987);
var myMapOptions = {
  zoom: 2,
  center: latlng,
  panControl: false,
  scaleControl: true,
  mapTypeId: google.maps.MapTypeId.TERRAIN,
  mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR},
  navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT}
}
map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

infoBubble = new InfoBubble({
      shadowStyle: 0,
      padding: 0,
      backgroundColor: 'rgb(57,57,57)',
      borderRadius: 5,
      arrowSize: 10,
      borderWidth: 1,
      maxWidth: 400,
      borderColor: '#2c2c2c',
      disableAutoPan: false,
      hideCloseButton: true,
      arrowPosition: 50,
      backgroundClassName: 'phoney',
      arrowStyle: 0
    });

  // Change this depending on the name of your PHP file
  downloadUrl("phpsqlajax_genxml_2.php", function(data) {
    var xml = parseXml(data);
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {          
        var bar_name = markers[i].getAttribute("bar_name");
        var hostel_name = markers[i].getAttribute("hostel_name");
        var street = markers[i].getAttribute("street");
        var city = markers[i].getAttribute("city");
        var postcode = markers[i].getAttribute("postcode");
        var country = markers[i].getAttribute("country");
        var page = markers[i].getAttribute("page");
        var map_photo = markers[i].getAttribute("map_photo");
        var type = markers[i].getAttribute("type");
        var category = markers[i].getAttribute("category");
        var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));

      var html = '<div class="infowindow"><div class="iwPhoto" style="width: 
105px; height: 65px;">' + "<a href='" + page + "'><img src='" + map_photo + "' alt=''/> 
</a>" + '</div><div class="iwName" style="height: 24px;">' + "<a href='" + page + "'>" + 
hostel_name + "</a>" + '</div><div class="iwCategory" style="height: 15px;">' + category +   
'</div><div class="iwCity" style="height: 29px;">' + "<a href='" + page + "'>" + city + "
</a>" + '<div class="iwArrow" style="width: 29px; height: 29px;">' + "<a href='" + page + 
"'><img src='/resources/arrow.png'/></a>" + '</div></div></div>';

      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow,
        title: bar_name
      });
      marker.bar_name = bar_name;
      bindInfoBubble(marker, map, infoBubble, html, bar_name);
    }

document.getElementById("dd").innerHTML = dropdown; 

  });

str = '<option selected> - Select a club - </option>';
for (j=0; j < gmarkers.length; j++){
str += '<option value="'+gmarkers[j].bar_name+'">'+gmarkers[j].bar_name+'</option>';
}
var str1 ='<form name="form_city" action=""><select style="width:150px;"       
id="select_city" name="select_cityUrl" onchange="handleSelected(this);">';
var str2 ='</select></form>';
dropdown = str1 + str + str2;

return marker;

}   
function handleSelected(opt) {
var indexNo = opt[opt.selectedIndex].index;
google.maps.event.trigger(gmarkers[indexNo-1], "click");
}

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

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.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
}

function doNothing() {}

<body onLoad="initialize()"> 
<div id="map_canvas" style="width: 980px; height: 470px"></div> 
<div id="mapfooter"> 
<div id="dd"></div>  
</div> 

Карта работает нормально, выпадающий список видим, однако данные XML не загружаются в выпадающий список.

Буду признателен за помощь.

Спасибо

Answer 1

Похоже, varable gmarkers не устанавливается, когда выполняется цикл:

for (j=0; j < gmarkers.length; j++){

.

Возможно следующее:

str += '<option value="'+gmarkers[j].bar_name+'">'+gmarkers[j].bar_name+'</option>';

должно быть включено в исходящий цикл:

for (var i = 0; i < markers.length; i++) { 

и скорректировано на:

str += '<option value="'+bar_name+'">'+bar_name+'</option>';