if (GBrowserIsCompatible()) {
	var map = new GMap2(document.getElementById("gmap"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(0,0),0);
	// this variable will collect the html which will eventually be placed in the side_bar
	var side_bar_html = "";
	var gmarkers = [];
	var htmls = [];
	var i = 0;

	// arrays to hold variants of the info window html with get direction forms open
	var to_htmls = [];
	var from_htmls = [];

	// A function to create the marker and set up the event window
	function createMarker(point,name,html,address,phone) {
	    var marker = new GMarker(point);

	    var i = gmarkers.length;

	    // The info window version with the "to here" form open
	    to_htmls[i] = '<div class="gmap-info">' + '<h6>' + name + '</h6>' + address + '<br>' + phone + '<br>' + html + '<hr>' + 'Directions: <b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' +
	       '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
	       '<input type="text" name="saddr" id="saddr" value="" /><br>' +
	       '<input value="Get Directions" type="submit">' +
	       '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
	              // "(" + name + ")" + 
	       '"/>' + '</div>';
	    // The info window version with the "to here" form open
	    from_htmls[i] = '<div class="gmap-info">' + '<h6>' + name + '</h6>' + address + '<br>' + phone + '<br>' + html + '<hr>' + 'Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' +
	       '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
	       '<input type="text" name="daddr" id="daddr" value="" /><br>' +
	       '<input value="Get Directions" type="submit">' +
	       '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
	              // "(" + name + ")" + 
	       '"/>' + '</div>';
	    // The inactive version of the direction info
	    html = '<div class="gmap-info">' + '<h6>' + name + '</h6>' + address + '<br>' + phone + '<br>' + html + '<hr>' + 'Directions: <a href="javascript:tohere('+i+')">To here<\/a> - <a href="javascript:fromhere('+i+')">From here<\/a>' + '</div>';

	    GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
	    // save the info we need to use later for the side_bar
	    gmarkers.push(marker);
	    htmls[i] = html;
	    // add a line to the side_bar html
	    side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br>';
	i++;
	    return marker;
	  }

	  // This function picks up the click and opens the corresponding info window
	function myclick(i) {
	  gmarkers[i].openInfoWindowHtml(htmls[i]);
	}

	// functions that open the directions forms
	function tohere(i) {
	  gmarkers[i].openInfoWindowHtml(to_htmls[i]);
	}
	function fromhere(i) {
	  gmarkers[i].openInfoWindowHtml(from_htmls[i]);
	}

	// ===== Start with an empty GLatLngBounds object =====     
	var bounds = new GLatLngBounds();

	// Read the data from example.xml
	var request = GXmlHttp.create();
	request.open("GET", "/includes/locations.xml", true);
	request.onreadystatechange = function() {
	if (request.readyState == 4) {
	  var xmlDoc = GXml.parse(request.responseText);
	  // obtain the array of markers and loop through it
	  var markers = xmlDoc.documentElement.getElementsByTagName("marker");

	  for (var i = 0; i < markers.length; i++) {
	    // obtain the attribues of each marker
	    var lat = parseFloat(markers[i].getAttribute("lat"));
	    var lng = parseFloat(markers[i].getAttribute("lng"));
	    var point = new GLatLng(lat,lng);
		var address = markers[i].getAttribute("address");
	    var html = markers[i].getAttribute("content");
	    var label = markers[i].getAttribute("name");
		var phone = markers[i].getAttribute("phone");
	    // create the marker
	    var marker = createMarker(point,label,html,address,phone);
	    map.addOverlay(marker);

	    // ==== Each time a point is found, extent the bounds ato include it =====
	    bounds.extend(point);
	  }
	  // put the assembled side_bar_html contents into the side_bar div
	  if(document.getElementById("side-bar")) {
	  document.getElementById("side-bar").innerHTML = side_bar_html;
		}
		
	  // ===== determine the zoom level from the bounds =====
	  map.setZoom(map.getBoundsZoomLevel(bounds));

	  // ===== determine the centre from the bounds ======
	  map.setCenter(bounds.getCenter());
	 }
	}
	request.send(null);
	}

	else {
	  alert("Sorry, the Google Maps API is not compatible with this browser");
	}