侧栏Google Maps API v3使用PHP/MYSQL拉取数据

我正在尝试构建一个脚本，该脚本使用 php/mysql。我想创建一个侧栏，其中包含
我的数据库。有点像下面链接中的示例

我能够拉入数据并在我的地图上显示位置 好的但是侧边栏没有显示我的任何标记，我很确定创建标记的代码部分有问题。。我对javascript还不熟悉，所以可能会出错。这部分代码可以在第36行找到。。。开始的时候就像

    function createMarker(latlng, name, html) {

这是我的脚本的链接

这是实际的脚本

    <script type="text/javascript"> 


var customIcons = {
  c: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  u: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
};
    // this variable will collect the html which will eventually be placed in the      select 

  var select_html = ""; 

  // arrays to hold copies of the markers
  // because the function closure trick doesnt work there 

  var gmarkers = []; 

 // global "map" variable

  var map = null;

  // A function to create the marker and set up the event window function      i am   pretty sure something is not right here

  function createMarker(latlng, name, html) {
var ContentString = html;
var markers = new google.maps.Marker({
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(ContentString); 
    infowindow.open(map,marker);
    });

    // ======= Add the entry to the select box =====
    select_html += '<option> ' + name + '<\/option>';
    // ==========================================================

// save the info we need to use later
gmarkers.push(markers);
return markers;
}



  // ======= This function handles selections from the select box ====
  // === If the dummy entry is selected, the info window is closed ==
  function handleSelected(opt) {
    var i = opt.selectedIndex - 1; 
    if (i > -1) {
      google.maps.event.trigger(gmarkers[i],"click");
    }
    else {
      infowindow.close();
    }
  }

  function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(29.760, -95.387),
    zoom: 10,
    mapTypeId: 'hybrid'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("phpsqlajax_genxml2.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("skatespots");

   // ==== first part of the select box ===
    select_html = '<select onChange="handleSelected(this)">' +
                    '<option selected> - Select a location - <\/option>';

    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var confirmed = markers[i].getAttribute("confirmed");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b>";
      var icon = customIcons[confirmed] || {};
 // i think the varmarker bit is not right not here not sure though

      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
    // ===== final part of the select box =====
    select_html += '<\/select>';
    document.getElementById("selection").innerHTML = select_html;
  });
}

  function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.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() {}



// This Javascript is based on code provided by the

// Community Church Javascript Team

// http://www.bisphamchurch.org.uk/   

// http://econym.org.uk/gmap/

// from the v2 tutorial page at:

// http://econym.org.uk/gmap/basic3.htm 

var customIcons={
c:{
图标：'http://labs.google.com/ridefinder/images/mm_20_blue.png',
影子：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
u:{
图标：'http://labs.google.com/ridefinder/images/mm_20_red.png',
影子：'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
//此变量将收集最终放置在select中的html
var select_html=“”；
//用于保存标记副本的数组
//因为函数闭包技巧在那里不起作用
var gmarkers=[]；
//全局“映射”变量
var-map=null；
//一个创建标记和设置事件窗口函数的函数我很确定这里有些不对劲
函数createMarker（latlng、name、html）{
var ContentString=html；
var markers=new google.maps.Marker({
位置：latlng，
地图：地图，
zIndex:Math.round（latlng.lat（）*-100000）-1）{
google.maps.event.trigger（gmarkers[i]，“点击”）；
}
否则{
infowindow.close（）；
}
}
函数加载（）{
var map=new google.maps.map（document.getElementById（“map”）{
中心：新google.maps.LatLng（29.760，-95.387），
缩放：10，
mapTypeId:'混合'
});
var infoWindow=new google.maps.infoWindow；
//根据PHP文件的名称更改此选项
下载URL（“phpsqlajax_genxml2.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“skatespots”）；
//==选择框的第一部分===
选择_html=''+
“-选择一个位置-”；
对于（var i=0；i

任何关于出错原因的帮助或提示都将不胜感激

---

谢谢

这个答案假设边栏是指选择组合框

原始版本称为

function createMarker(latlng, name, html)

这会将选项添加到“选择”框中

您不再调用createMarker，而是调用

function bindInfoWindow(marker, map, infoWindow, html)

它只添加“click”侦听器，但不做任何其他事情（例如将选项添加到select_html变量）

您可以修改您的循环：

for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var confirmed = markers[i].getAttribute("confirmed");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b>";
      var icon = customIcons[confirmed] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);

      // I have been added so I populate the select combo box. 
      select_html += '<option> ' + name + '<\/option>';
}

for（变量i=0；i

这个答案假设边栏是指选择组合框

原始版本称为

function createMarker(latlng, name, html)

这会将选项添加到“选择”框中

您不再调用createMarker，而是调用

function bindInfoWindow(marker, map, infoWindow, html)

它只添加“click”侦听器，但不做任何其他事情（例如将选项添加到select_html变量）

您可以修改您的循环：

for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var confirmed = markers[i].getAttribute("confirmed");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b>";
      var icon = customIcons[confirmed] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);

      // I have been added so I populate the select combo box. 
      select_html += '<option> ' + name + '<\/option>';
}

for（变量i=0；ivar infoWindow = new google.maps.InfoWindow; // btw this one should be global like map

// and elsewhere:
function handleSelected(opt) {
  var i = opt.selectedIndex - 1; 
  if (i > -1) {
    google.maps.event.trigger(gmarkers[i],"click");
  }
   else {
    infowindow.close();
  }
}

  // i think the varmarker bit is not right not here not sure though

  var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon,
    shadow: icon.shadow
  });
  bindInfoWindow(marker, map, infoWindow, html);

createMarker(point, name, html, icon);

function createMarker(latlng, name, html, icon) {
  var ContentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat()*-100000)<<5,
    icon: icon.icon,
    shadow: icon.shadow
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(ContentString); 
    infowindow.open(map,marker);
  });

  // ======= Add the entry to the select box =====
  select_html += '<option> ' + name + '</option>';
  // ==========================================================

  // save the info we need to use later
  gmarkers.push(marker);
  return marker;
}