//<![CDATA[
    
    if (GBrowserIsCompatible()) {

		// this variable will collect the html which will eventualkly be placed in the side_bar
		var side_bar_html = "";    

		// arrays to hold copies of the markers used by the side_bar
		// because the function closure trick doesnt work there
		var gmarkers = [];
      
		var baseIcon = new GIcon(G_DEFAULT_ICON);
		baseIcon.shadow = "http://www.google.com/mapfiles/shadow20.png";
		baseIcon.iconSize = new GSize(22, 32);
		baseIcon.shadowSize = new GSize(22, 32);
		baseIcon.iconAnchor = new GPoint(9, 34);
		baseIcon.infoWindowAnchor = new GPoint(9, 2);
    
	
   		// A function to create the marker and set up the event window     
    	function createMarker(point,name,html,location,posted) {	
 			var letteredIcon = new GIcon(baseIcon);
    	    letteredIcon.image = "/includes/images/marker.png";
 	
    	    // Set up our GMarkerOptions object
    	    markerOptions = { icon:letteredIcon };
			  
        	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.push(marker);
        
        	// add a line to the side_bar html
        	side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
        	return marker;
    	}
    

		// This function picks up the click and opens the corresponding info window
    	function myclick(i) {
			GEvent.trigger(gmarkers[i], "click");
    	}

    	// create the map
    	var map = new GMap2(document.getElementById("divMap"));
    	map.setCenter(new GLatLng(53.784021, -0.31311), 10);
		  map.setMapType(G_NORMAL_MAP);
 		  map.addControl(new GSmallZoomControl3D());

		  // Read the data from example.xml
		  GDownloadUrl("/course/map_data/", function(doc) {

    		var xmlDoc = GXml.parse(doc);
        	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 html = markers[i].getAttribute("html");
        		var label = markers[i].getAttribute("label");

				    // create the marker
        		var marker = createMarker(point,label,html);
        		map.addOverlay(marker);
          
        	}

    	});

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