if (GBrowserIsCompatible()) {

  // Display the map, with some controls and set the initial location
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(lat,lng), zoom);

	var tinyIcon = new GIcon();
	tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
  	tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	tinyIcon.iconSize = new GSize(12, 20);
  	tinyIcon.shadowSize = new GSize(22, 20);
	tinyIcon.iconAnchor = new GPoint(6, 20);
	tinyIcon.infoWindowAnchor = new GPoint(5, 1);

  // Set up our GMarkerOptions object
  markerOptions = { icon:tinyIcon };

  // arrays to hold copies of the markers and html used by the side_bar
  // because the function closure trick doesnt work there
  var side_bar_html = "";
  var gmarkers = [];
  var htmls = [];
  var i = 0;
  var query = document.location.search;

  // A function to create the marker and set up the event window
  function createMarker(point,name,html) {
	var marker = new GMarker(point,markerOptions);
	GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml(html);
	});
	// save the info we need to use later for the side_bar
	gmarkers[i] = marker;
	htmls[i] = html;
	// add a line to the side_bar html
	side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a>';
    i++;
    return marker;
  }
  // This function picks up the click and opens the corresponding info window
  function myclick(i) {
    gmarkers[i].openInfoWindowHtml(htmls[i]);
  }
  // Read the data

  var request = GXmlHttp.create();
  request.open("GET", "mapper.xml.php"+query, true);
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      var xmlDoc = GXml.parse(request.responseText);
      // obtain the array of markers and loop through it

     // ========= Now process the map outline ===========
      var poly = xmlDoc.documentElement.getElementsByTagName("polygon");
      // read each line
      for (var a = 0; a < poly.length; a++)
	{
       	// read each point on that line
	      var points = poly[a].getElementsByTagName("point");
		var pts = [];
	      for (var i = 0; i < points.length; i++)
		{
	         pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
	                               parseFloat(points[i].getAttribute("lng")));
	      }
       }
       var polygon = new GPolygon(pts, "#CCCC33", 1, 1, "#CCCC33", 0.2)
	 map.addOverlay(polygon);



     var markers = xmlDoc.documentElement.getElementsByTagName("marker");

      for (var i = 0; i < markers.length; i++) {
        // obtain the attribues of each marker
	  // might be able to just create a label here if no lat and lng??
        var lat = parseFloat(markers[i].getAttribute("lat"));
        var lng = parseFloat(markers[i].getAttribute("lng"));
	  var label = markers[i].getAttribute("label");
	  if(lat>0)
	  {
	        var point = new GLatLng(lat,lng);
	        var html = markers[i].getAttribute("html");
 	        // create the marker
	        var marker = createMarker(point,label,html);
	        map.addOverlay(marker);
	  }
	  else side_bar_html +=  '<span class="sideheader">' + label + '</span>';
      }
      // put the assembled side_bar_html contents into the side_bar div
	document.getElementById("side_bar").innerHTML = side_bar_html;




       // ========= Now process the route ===========
       var lines = xmlDoc.documentElement.getElementsByTagName("line");
       // read each line
        for (var a = 0; a < lines.length; a++) {
        // get any line attributes
        var colour = lines[a].getAttribute("colour");
        var width  = parseFloat(lines[a].getAttribute("width"));
        // read each point on that line
        var points = lines[a].getElementsByTagName("point");
        var pts = [];
        for (var i = 0; i < points.length; i++) {
           pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                               parseFloat(points[i].getAttribute("lng")));
        }
        map.addOverlay(new GPolyline(pts,colour,width));
      }
      // ================================================

    }
  }
  request.send(null);

}

// display a warning if the browser was not compatible
else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}

// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/

//]]>