XML : Creating multiple markers in google map from xml file with Javascript

I want to create a website which involves a map and showing some markers etc on it. But I am having problems with showing the map. Here is my Javascript code:

  <script>          function loadXml(xmlUrl) {              if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari                  xmlhttp = new XMLHttpRequest();              } else {//IE6, IE5                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");              }              xmlhttp.open("GET", xmlUrl, false);              xmlhttp.send();              xmlDoc = xmlhttp.responseXML;              return xmlDoc;          }            function createMarkers(xmlDoc) {              var items = xmlDoc.getElementsByTagName('trophy');              for (var i = 0; i < items.length; i++) {                  var position = items[i].getElementsByTagName('position')[0];                  var latlng = new google.maps.LatLng(position.getAttribute('lat'), position.getAttribute('lng'));                  var titleNode = items[i].getElementsByTagName('match')[0].childNodes[0];                  var html = "<div class='infowindow'><b>" + titleNode + "</b> <br/>" + address + '<br/></div>';                  var marker = new google.maps.Marker({                      position: latlng,                      map: map,                      title: titleNode.nodeValue                  });                  map.markers.push(marker);                  bindInfoWindow(marker, map, infoWindow, html);              }          }            function bindInfoWindow(marker, map, infoWindow, html) {              google.maps.event.addListener(marker, 'click', function () {                  infoWindow.setContent(html);                  infoWindow.open(map, marker);              });          }            function initialize() {              var mapOptions = {                  center: new google.maps.LatLng(54.9000, 25.3167),                  zoom: 4,                  mapTypeId: google.maps.MapTypeId.ROADMAP              }              geocoder = new google.maps.Geocoder();              infoWindow = new google.maps.InfoWindow;              map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);                var xmlDoc = loadXml("trophies.xml");              createMarkers(xmlDoc);          }          google.maps.event.addDomListener(window, 'load', initialize);      </script>    

The result is a blank page. Any ideas on where I am making mistake/mistakes?

Cheers!

No comments:

Post a Comment