var lat=43.619110;
var lng=-81.293335;
var zoom=9;

//function initialize(){
	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/

//]]>