标记未显示在 Google Maps API 中

Question

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

我已确认解析 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>

HTML：

<br />
<div class="inner-article-header"><h2>Map of Locations</h2></div>
<div id="map_canvas" style="height:565px; width:754px; margin:2px;"></div>
</div>

Answer 1

这是不正确的：

SetMap: map_canvas,

应该是（见MarkerOptions in the documentation）：

map: map,

更正的标记构造函数：

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);
      }
    });
  }

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

您在调用 bindInfoWindow 及其定义（map_canvas，应该是 map）方面还有其他问题