//<![CDATA[

	if (GBrowserIsCompatible()) {
		// this variable will collect the html which will eventualkly be placed in the side_bar
		var side_bar_html_1 = "";
		var side_bar_html_2 = "";
		var side_bar_html_3 = "";
		// arrays to hold copies of the markers used by the side_bar
		// because the function closure trick doesnt work there
		var gmarkers = [];
		var i = 0;

		// A function to create the marker and set up the event window
		function createMarker(point,name,html,num_items) {
			/* custom icon */
			var icon = new GIcon();
			icon.image = "/images/googlemaps_marker_dtm.png";
			icon.shadow = "/images/googlemaps_marker_shadow_dtm.png";
			icon.iconSize = new GSize(20, 34);
			icon.shadowSize = new GSize(37, 34);
			icon.iconAnchor = new GPoint(10, 33);
			icon.infoWindowAnchor = new GPoint(10, 0);

			var marker = new GMarker(point,icon);
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(html);
			});
			// save the info we need to use later for the side_bar
			gmarkers[i] = marker;
			// add a line to the side_bar html - when we reach half the items, switch to sidebar 2
			var sidebar_link = '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
			var items_per_col = Math.floor(num_items/3);
			if(i <= items_per_col){
			//	side_bar_html_1 += sidebar_link;
			}else if((i > items_per_col) && (i <= (items_per_col*2))){
			//	side_bar_html_2 += sidebar_link;
			}else{
			//	side_bar_html_3 += sidebar_link;
			}
			i++;
			
			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("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng( 56.333212,10.88828), 7);

		// Read the data from example.xml
		var request = GXmlHttp.create();
		request.open("GET", '/xmlfeed/stores.xml', true);
		request.onreadystatechange = function() {
        if (request.readyState == 4) {
			var xmlDoc = GXml.parse(request.responseText);
			// obtain the array of stores and loop through it
			var stores = xmlDoc.documentElement.getElementsByTagName("store");
			var num_items = stores.length; // record number of items

			for (var i = 0; i < stores.length; i++) {
				var name 		= GXml.value(stores[i].getElementsByTagName("name")[0]);
				var address 	= GXml.value(stores[i].getElementsByTagName("address")[0]);
				var postcode 	= GXml.value(stores[i].getElementsByTagName("postcode")[0]);
				var city 		= GXml.value(stores[i].getElementsByTagName("city")[0]);
				var website 	= GXml.value(stores[i].getElementsByTagName("website")[0]);
	            var lat 		= parseFloat(GXml.value(stores[i].getElementsByTagName("lat")[0]));
	            var lng 		= parseFloat(GXml.value(stores[i].getElementsByTagName("lon")[0]));
	
	            var point = new GLatLng(lat,lng);
	           	var html = '<strong>'+name+'</strong><br>'+address+'<br>'+postcode+', '+city+'<br><br><a href="http://'+website+'">'+website+'</a><br>';
				var label = city; // sets the sidebar item name
				var marker = createMarker(point,label,html,num_items);

				map.addOverlay(marker);
			}

          // put the assembled side_bar_html contents into the side_bar div
		//	document.getElementById("side_bar_1").innerHTML = side_bar_html_1;
		//	document.getElementById("side_bar_2").innerHTML = side_bar_html_2;
		//	document.getElementById("side_bar_3").innerHTML = side_bar_html_3;
		}
	}
	request.send(null);
	} else {
		alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>