if (GBrowserIsCompatible()) {
     var side_bar_html = "";
     var gmarkers = [];
     var htmls = [];
	 var others = [];
	 var marker_type = [];
     var i = 0;


     // A function to create the marker and set up the event window
     function createMarker(point,name,html,other_txt, identifier, marker_type) {
		
		if(marker_type == 1)
		{
		 	var gicon = new GIcon(G_DEFAULT_ICON, 'images/marker.png');
		 	gicon.shadow = 'images/marker_shadow.png';
		 	gicon.iconAnchor = new GPoint(3, 20);			
		}
		else if(marker_type == 2)
		{
			var gicon = new GIcon(G_DEFAULT_ICON, 'images/marker_top.png');
		 	gicon.shadow = 'images/marker_top_shadow.png';
 		 	gicon.iconAnchor = new GPoint(18, 0);
		}
	
		 gicon.iconSize = new GSize(20,20);
		 gicon.shadowSize = new GSize(31,20);

		 gicon.transparent = null
		 gicon.mozPrintImage = null
		 gicon.printImage = null
	
       var marker = new GMarker(point,{icon: gicon});
       GEvent.addListener(marker, "click", function() {
         marker.openInfoWindowHtml(html);
		 myclick(identifier);

       });
       gmarkers[i] = marker;
       htmls[i] = html;
		others[i] = other_txt;
       // side_bar_html += '<li><a href="javascript:myclick(' + i + ')">' + name + '<\/a></li>';
       side_bar_html += name;
       i++;
       return marker;
     }


     function myclick(i) {
    	var tid=htmls[i].match(/\/\d+\//g);
    	var id=tid[0];
    	id=id.match(/\d+/);
       gmarkers[i].openInfoWindowHtml(htmls[i]);
		$('#location-detail').html('<p>Current Location Details: '+others[i] +' - <a href="branch/'+others[i]+'-Tyres-MOTs-Servicing-Exhausts-Brakes-Batteries/'+id+'/">View Centre</a></p>');
		// Could have some funky stuff here working that could show details in a div below the map ?
     }

     // create the map
     var map = new GMap2(document.getElementById("map"),{mapTypes:[G_HYBRID_MAP, G_NORMAL_MAP]});
     map.addControl(new GLargeMapControl());
     map.addControl(new GMapTypeControl());
     map.setCenter(new GLatLng(52.214338608258196, -1.395263671875), 7);
		// old ( 52.214338608258196, -0.98876953125)
	//
     // Read the data from 100.xml
     
     GDownloadUrl("properties.xml", function (doc) {
       var xmlDoc = GXml.parse(doc);
       var markers = xmlDoc.documentElement.getElementsByTagName("marker");
       var prevI=-1; 
       
       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");
		 var other_txt = markers[i].getAttribute("other");
		 var flag_type = markers[i].getAttribute("flag_type");
		var identifier = i;
         // create the marker
			var marker = createMarker(point,label,html, other_txt, identifier, flag_type);
			map.addOverlay(marker);
       }
       document.getElementById("side_bar").innerHTML = side_bar_html;
       
       var mylist = $('#side_bar');
       var listitems = mylist.children('li').get();
       listitems.sort(function(a, b) {
          var compA = $(a).text().toUpperCase();
          var compB = $(b).text().toUpperCase();
          return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
       })
       $.each(listitems, function(idx, itm) { mylist.append(itm); });
       
       
     });
   }

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