Markers not showing in Google Maps API

Question

I have just loaded the following code into my webpage and after many hours of troubleshooting, I can't get the Markers to show up?

I have confirmed that the parsing php file is working.

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

This is incorrect:

SetMap: map_canvas,

Should be (see MarkerOptions in the documentation):

map: map,

corrected marker constructor:

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

Add the parsing of the XML into the initialize function, so map is valid when you add the markers:

  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 (using one of my existing xml files, since you didn't provide any example data)

You have additional problems with the call to bindInfoWindow and its definition (map_canvas, should be map)