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