Javascript 谷歌地图API中未显示标记

我刚刚将以下代码加载到我的网页中，经过数小时的故障排除，我无法显示标记

我已经确认解析php文件正在工作

Javascript:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>

var customIcons = {
  accom: {
    icon: 'images/google_map_icon_green.png'
  },
  food: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  }
};

  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(
      <?php if ($_COOKIE[company] == 'ch') { echo $ch[hls_lat].", ".$ch[hls_long]; } elseif ($_COOKIE[company] == 'shc') { echo $shc[hls_lat].", ".$shc[hls_long]; } elseif ($_COOKIE[company] == 'lmh') { echo $lmh[hls_lat].", ".$lmh[hls_long]; }?>),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  var infoWindow = new google.maps.InfoWindow;

  downloadUrl("required/xml_parse.php", function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var id = markers[i].getAttribute("id");
    var name = markers[i].getAttribute("name");
    var icao = markers[i].getAttribute("icao");
    var type = markers[i].getAttribute("type");
    var elev = markers[i].getAttribute("elev");
    var conname = markers[i].getAttribute("contactname");
    var connum = markers[i].getAttribute("contactnum");
    var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
    var html = "<b>" + name + "</b> - " + icao + "<br/>" + conname + " - " + connum;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      SetMap: map_canvas,
      position: point,
      icon: icon.icon
    });
    bindInfoWindow(marker, map_canvas, infoWindow, html);
  }
});

function bindInfoWindow(marker, map_canvas, 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() {}

</script>

var customIcons={
会计：{
图标：“images/google\u map\u icon\u green.png”
},
食物：{
图标：'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
函数初始化（）{
var mapCanvas=document.getElementById（'map_canvas'）；
变量映射选项={
中心：新google.maps.LatLng(
),
缩放：12，
mapTypeId:google.maps.mapTypeId.HYBRID
}
var map=new google.maps.map（mapCanvas，mapOptions）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
var infoWindow=new google.maps.infoWindow；
下载URL（“required/xml_parse.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i“+conname+”-“+connum；
var icon=customIcons[type]| |{}；
var marker=new google.maps.marker({
SetMap:map_canvas，
位置:点,，
图标：icon.icon
});
bindInfoWindow（标记、地图画布、infoWindow、html）；
}
});
函数bindInfoWindow（标记、地图画布、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}

HTML:

位置图

这是不正确的：

SetMap: map_canvas,

应为（见）：

更正的标记构造函数：

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

将XML解析添加到initialize函数中，以便添加标记时，

map

有效：

  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(0,0),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);

    downloadUrl("example.xml", function(data) {
      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var id = markers[i].getAttribute("id");
        var name = markers[i].getAttribute("name");
        var icao = markers[i].getAttribute("icao");
        var type = markers[i].getAttribute("type");
        var elev = markers[i].getAttribute("elev");
        var conname = markers[i].getAttribute("contactname");
        var connum = markers[i].getAttribute("contactnum");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> - " + icao + "<br/>" + conname + " - " + connum;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: icon.icon
        });
        bindInfoWindow(marker, map, infoWindow, html);
      }
    });
  }

函数初始化（）{
var mapCanvas=document.getElementById（'map_canvas'）；
变量映射选项={
中心：新google.maps.LatLng（0,0），
缩放：4，
mapTypeId:google.maps.mapTypeId.HYBRID
}
var map=new google.maps.map（mapCanvas，mapOptions）；
下载URL（“example.xml”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i“+conname+”-“+connum；
var icon=customIcons[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
图标：icon.icon
});
bindInfoWindow（标记、地图、infoWindow、html）；
}
});
}

（使用我现有的一个xml文件，因为您没有提供任何示例数据）

---

对bindInfoWindow的调用及其定义（map_canvas，应该是map）还有其他问题。

标记没有

map

-属性

map

属性在调试器中显示为未定义，因此我将其替换为

SetMap

属性。还有什么可以是@Dr.Molle的吗？这是因为映射是在XML数据加载后，在初始化函数运行时（在页面加载事件上）定义的。@geocodezip-您建议如何解决此问题？我假设您从某个工作示例中获得此代码，请仔细查看您所做的更改。谢谢，您更改了此代码，但还是没有成功？回到

map

undefined？你真是一个神，先生！非常感谢你！现在效果很好！：D:D

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

  function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(0,0),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);

    downloadUrl("example.xml", function(data) {
      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var id = markers[i].getAttribute("id");
        var name = markers[i].getAttribute("name");
        var icao = markers[i].getAttribute("icao");
        var type = markers[i].getAttribute("type");
        var elev = markers[i].getAttribute("elev");
        var conname = markers[i].getAttribute("contactname");
        var connum = markers[i].getAttribute("contactnum");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> - " + icao + "<br/>" + conname + " - " + connum;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: icon.icon
        });
        bindInfoWindow(marker, map, infoWindow, html);
      }
    });
  }