Google Maps, Ajax XML data



I am learning to access data from an XML file and place on a Google map but keep getting the error: 'TypeError: xml is undefined http://ift.tt/12uaPjV Line 138'


Can anyone see why this error is occurring?


All code is on this example



var map;

var Data = []; // this array stores all data
var viewportMarkersKS2 = [];
var viewportMarkersP16 = [];
var viewportMarkersHealthcare = [];
var KS2MarkersVisible = document.getElementById('Checkbox1');
var P16MarkersVisible = document.getElementById('Checkbox2');
var HealthcareMarkersVisible = document.getElementById('Checkbox3');
var infoWindow;
var handle1, handle2;
var iconBlue = 'icons/blue-dot.png';
var iconGreen = 'icons/green-dot.png';
var iconPink = 'icons/pink-dot.png';
//var zoomLevel = map.getZoom();

// property and map center
var iniLat = 51.401997;
var iniLon = -1.276934;
var iniZoom = 15;
var ResetZoom = 13;
var maxZoom = 12;
var propertyLatLng = new google.maps.LatLng(iniLat, iniLon);

function initialize() {

// change map size dependent on useragent
detectBrowser()

// map options
var mapOptions = {
center: propertyLatLng,
zoom: iniZoom
};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);




//********************************************************************************************************************
//********************************************************************************************************************
//********************************************** *********************************************
//********************************************** SELECTED PROPERTY *********************************************
//********************************************** *********************************************
//********************************************************************************************************************
//********************************************************************************************************************

// add the property to the map
var propertyIcon = new google.maps.Marker({
position: propertyLatLng
});




// infoWindows
var infoWindowContent = '11 Derwent Road<br />Thatcham<br />Berkshire<br />RG19 3UT';

var infowindow = new google.maps.InfoWindow({
content: infoWindowContent
});

google.maps.event.addListener(propertyIcon, 'click', function () {
infowindow.open(map, propertyIcon);
});


// add markers to the map
propertyIcon.setMap(map);





// when user drags the map or zooms in/out, update list of airports in range
google.maps.event.addListenerOnce(map, 'bounds_changed', function () { showGetResultXml() });
google.maps.event.addListener(map, 'dragend', function () { showGetResultXml() });
google.maps.event.addListener(map, 'zoom_changed', function () { showGetResultXml() });


}





function showGetResultXml() {
var result = null;
var scriptUrl = "http://ift.tt/1zQEzBF";
$.ajax(
{
url: scriptUrl,
type: 'get',
dataType: 'xml',
async: false,
success: function(data) {
result = data;
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("Row");

for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("SchoolName");
var address = markers[i].getAttribute("Address1");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("Coordinates")));

var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};

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

bindInfoWindow(marker, map, infoWindow, html);
}
},
error: function onXmlError() {
alert("An Error has occurred.");
}
});







function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

return result;
}



function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '100%';
}
}





google.maps.event.addDomListener(window, 'load', initialize);


Thanks for any help.


No comments:

Post a Comment