if (GBrowserIsCompatible()) {
      var side_bar_html = "";
      var gmarkers = [];
      var htmls = [];
      var i = 0;
	  
		var xmlfile = [];
		xmlfile[1] = "http://www.skyshot.co.uk/maps/xml/active.xml";
		xmlfile[2] = "http://www.skyshot.co.uk/maps/xml/attraction.xml";
		xmlfile[3] = "http://www.skyshot.co.uk/maps/xml/beach.xml";
		xmlfile[4] = "http://www.skyshot.co.uk/maps/xml/campsites.xml";
		xmlfile[5] = "http://www.skyshot.co.uk/maps/xml/history.xml";
		xmlfile[6] = "http://www.skyshot.co.uk/maps/xml/hotels.xml";
		xmlfile[7] = "http://www.skyshot.co.uk/maps/xml/nature.xml";
		xmlfile[8] = "http://www.skyshot.co.uk/maps/xml/pubsclubs.xml";
		xmlfile[9] = "http://www.skyshot.co.uk/maps/xml/towns.xml";
		xmlfile[10] = "http://www.skyshot.co.uk/maps/xml/walk.xml";
		xmlfile[11] = "http://www.skyshot.co.uk/maps/xml/food.xml";
		
// attraction
   var iconOrange = new GIcon(); 
    iconOrange.image = './pins/mm_34_orange.png';
    iconOrange.iconSize = new GSize(12, 20);
    iconOrange.shadowSize = new GSize(22, 20);
    iconOrange.iconAnchor = new GPoint(6, 20);
    iconOrange.infoWindowAnchor = new GPoint(5, 1);
// Bars
    var iconRed = new GIcon(); 
    iconRed.image = './pins/mm_34_red.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);
// Beach
    var iconBlue = new GIcon(); 
    iconBlue.image = './pins/mm_34_blue.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);
// Bars
    var iconRed = new GIcon(); 
    iconRed.image = './pins/mm_34_red.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);
// Nightclubs
    var iconBlue18 = new GIcon(); 
    iconBlue18.image = './pins/mm_34_blue_18.png';
    iconBlue18.iconSize = new GSize(12, 20);
    iconBlue18.shadowSize = new GSize(22, 20);
    iconBlue18.iconAnchor = new GPoint(6, 20);
    iconBlue18.infoWindowAnchor = new GPoint(5, 1);
// Holiday Parks 
    var iconYellow = new GIcon(); 
    iconYellow.image = './pins/mm_34_yellow.png';
    iconYellow.iconSize = new GSize(12, 20);
    iconYellow.shadowSize = new GSize(22, 20);
    iconYellow.iconAnchor = new GPoint(6, 20);
    iconYellow.infoWindowAnchor = new GPoint(5, 1);
// Walks & Woods	
	var iconPurple = new GIcon(); 
    iconPurple.image = './pins/mm_34_purple.png';
    iconPurple.iconSize = new GSize(12, 20);
    iconPurple.shadowSize = new GSize(22, 20);
    iconPurple.iconAnchor = new GPoint(6, 20);
    iconPurple.infoWindowAnchor = new GPoint(5, 1);
// Food
    var iconGreen = new GIcon(); 
    iconGreen.image = './pins/mm_34_green.png';
    iconGreen.iconSize = new GSize(12, 20);
    iconGreen.shadowSize = new GSize(22, 20);
    iconGreen.iconAnchor = new GPoint(6, 20);
    iconGreen.infoWindowAnchor = new GPoint(5, 1);
// Nature
    var iconWhite = new GIcon(); 
    iconWhite.image = './pins/mm_34_white.png';
    iconWhite.iconSize = new GSize(12, 20);
    iconWhite.shadowSize = new GSize(22, 20);
    iconWhite.iconAnchor = new GPoint(6, 20);
    iconWhite.infoWindowAnchor = new GPoint(5, 1);
// historical
    var iconGrey = new GIcon(); 
    iconGrey.image = './pins/mm_34_grey.png';
    iconGrey.iconSize = new GSize(12, 20);
    iconGrey.shadowSize = new GSize(22, 20);
    iconGrey.iconAnchor = new GPoint(6, 20);
    iconGrey.infoWindowAnchor = new GPoint(5, 1);
// attraction
    var iconOrange = new GIcon(); 
    iconOrange.image = './pins/mm_34_orange.png';
    iconOrange.iconSize = new GSize(12, 20);
    iconOrange.shadowSize = new GSize(22, 20);
    iconOrange.iconAnchor = new GPoint(6, 20);
    iconOrange.infoWindowAnchor = new GPoint(5, 1);
// Camping & Touring Sites  
    var iconViolet = new GIcon(); 
    iconViolet.image = './pins/mm_34_violet.png';
    iconViolet.iconSize = new GSize(12, 20);
    iconViolet.shadowSize = new GSize(22, 20);
    iconViolet.iconAnchor = new GPoint(6, 20);
    iconViolet.infoWindowAnchor = new GPoint(5, 1);
// Hotels  
    var iconAqua = new GIcon(); 
    iconAqua.image = './pins/mm_34_aqua.png';
    iconAqua.iconSize = new GSize(12, 20);
    iconAqua.shadowSize = new GSize(22, 20);
    iconAqua.iconAnchor = new GPoint(6, 20);
    iconAqua.infoWindowAnchor = new GPoint(5, 1);
// Activity  
    var iconGreenlight = new GIcon(); 
    iconGreenlight.image = './pins/mm_34_green_light.png';
    iconGreenlight.iconSize = new GSize(12, 20);
    iconGreenlight.shadowSize = new GSize(22, 20);
    iconGreenlight.iconAnchor = new GPoint(6, 20);
    iconGreenlight.infoWindowAnchor = new GPoint(5, 1);
// Holiday Cottages
    var iconWine = new GIcon(); 
    iconWine.image = './pins/mm_34_wine.png';
    iconWine.iconSize = new GSize(12, 20);   
    iconWine.shadowSize = new GSize(22, 20);
    iconWine.iconAnchor = new GPoint(6, 20);
    iconWine.infoWindowAnchor = new GPoint(5, 1);
// Tourist Info-Towns
    var iconInfopoint1 = new GIcon(); 
    iconInfopoint1.image = './pins/mm_34_infopoint1.png';
    iconInfopoint1.iconSize = new GSize(20, 34);   
    iconInfopoint1.shadowSize = new GSize(22, 20);
    iconInfopoint1.iconAnchor = new GPoint(6, 20);
    iconInfopoint1.infoWindowAnchor = new GPoint(5, 1);
// Train Stations
    var iconTrain = new GIcon(); 
    iconTrain.image = './pins/mm_34_train.png';
    iconTrain.iconSize = new GSize(15, 22);   
    iconTrain.shadowSize = new GSize(22, 20);
    iconTrain.iconAnchor = new GPoint(6, 20);
    iconTrain.infoWindowAnchor = new GPoint(5, 1);

   var customIcons = [];
       customIcons["active"]         = iconGreenlight;
       customIcons["attraction"]     = iconOrange;
       customIcons["bar"]            = iconRed;
       customIcons["beach"]          = iconBlue;
       customIcons["food"]           = iconGreen;
       customIcons["walk"]           = iconPurple;
       customIcons["hotel"]          = iconAqua;
       customIcons["history"]        = iconGrey;
       customIcons["csite"]          = iconViolet;
       customIcons["hpark"]          = iconYellow;
       customIcons["nature"]         = iconWhite;
       customIcons["tinfo"]          = iconInfopoint1;
       customIcons["nightclub"]      = iconBlue18;
       customIcons["cottage"]        = iconWine;
       customIcons["train"]          = iconTrain;

      // A function to create the marker and set up the event window
      function createMarker(point,name,html,pin,town,web,camera) {
        var marker = new GMarker(point, customIcons[pin]);
        var i2=i;
		
        GEvent.addListener(marker, "click", function() {
			if (map.getZoom() < 16) {
			map.setCenter(marker.getPoint(), 12); 
			//map.setZoom(9);
	   			marker.openInfoWindowHtml(html
	      			+ '<div class="text"><img src="./graphics/mg.jpg" width="18" height="18" alt="" /><a href="#" class="iw" onclick="javascript:zoomIn('+i2+')">Zoom in</a></div>');
	  		} else {
	   			marker.openInfoWindowHtml(html
	      			+ '<div class="text"><img src="./graphics/mg.jpg" width="18" height="18" alt="" /><a href="#" class="iw" onclick="javascript:zoomOut('+i2+')">Zoom out</a></div>');
	  		}
			     
	    });
        gmarkers[i] = marker;
        htmls[i] = html;
        // ======= Add the entry to the select box =====
        //select_html += '<option> ' + name + '</option>';
	 
          side_bar_html += '<div class="sblist"><a href="javascript:myclick(' + i + ')">' + name + '</a></div>';
          side_bar_html += '<div class="sbtown">' + town + '</div>';
		  side_bar_html += '<div class="sbcamera">' + camera +' </div></div>';
		// ========================================================== 
       i++;
        return marker;
      }
	  function zoomIn(i){
	   		map.setCenter(gmarkers[i].getPoint(), 16); 
			//map.setMapType(G_SATELLITE_TYPE);
			GEvent.trigger(gmarkers[i], "click");
	  }
	  function zoomOut(i){
	  		map.setCenter(gmarkers[i].getPoint(), 12); 
			map.setMapType(G_NORMAL_MAP);
			GEvent.trigger(gmarkers[i], "click");
	  }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
	  map.setCenter(gmarkers[i].getPoint(), 13);
	  //map.setZoom(9);
	  if (map.getZoom() < 16) {
        gmarkers[i].openInfoWindowHtml(htmls[i]+ '<div class="text"><img src="./graphics/mg.jpg" width="18" height="18" alt="" /><a href="#" class="iw" onclick="javascript:zoomIn('+i+')">Zoom in</a></div>');
		} else {
		gmarkers[i].openInfoWindowHtml(htmls[i]+ '<div class="text"><img src="./graphics/mg.jpg" width="18" height="18" alt="" /><a href="#" class="iw" onclick="javascript:zoomOut('+i+')">Zoom Out</a></div>');
		}
		
      }	

      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.setMapType(G_SATELLITE_MAP);
map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GOverviewMapControl());
      map.setCenter(new GLatLng(50.472310263983,-3.551502227783203),12);

	  
	  function handleSelected(opt) {
      var url = xmlfile[opt.selectedIndex];
      readMap(url);
      }
	  
      // A function to read the data
      function readMap(url) {
        var request = GXmlHttp.create();
        request.open("GET", url, true);
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
            // obtain the array of markers and loop through it
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");
            
            // hide the info window, otherwise it still stays open where the removed marker used to be
            map.getInfoWindow().hide();
            
            map.clearOverlays();
            
            // empty the array
            gmarkers = [];

            // reset the side_bar
             side_bar_html="";
            // select_html="";
         
            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 name     = markers[i].getAttribute("name");//change *name* to whatever, usually label  
              var pin      = markers[i].getAttribute("pin");
	      var type     = markers[i].getAttribute("type");	  
              var address  = markers[i].getAttribute("address");
              var town     = markers[i].getAttribute("town");
              var post     = markers[i].getAttribute("post");
              var tel      = markers[i].getAttribute("tel");
              var web      = markers[i].getAttribute("web");
              var tag      = markers[i].getAttribute("tag");
              var show     = markers[i].getAttribute("show");
	      var camera   = markers[i].getAttribute("camera");
              //var html='<b>'+name+'</b>:<br>Type: '+type+'<br>'+address+'<br>'+town+'  '+post+'<br>'+tel+'<br>'+web+'<br>'+tag+'<br>'+show;//put in html data from xml file
			  var html =
					'<div id="html"><div class="t1">'
					  + name +
					  '</div><div class="text">Type: '
					  + type + 
					 '</div><div class="text">'
					  + address +
					 '</div><div class="text">'
					  + town +' '+ post +
					'</div><div class="text">Tel: '  
					  + tel + 
					 '</div><div class="text">'
					  + web +
					 '</div><div class="text">'
					  + tag +' '+ show +
					  '</div>'
			   
              // create the marker
              var marker = createMarker(point,name,html,pin,town,web,camera);
              
              map.addOverlay(marker);

            }
            // ===== final part of the select box =====
        //select_html += '</select>';
        //document.getElementById("selection").innerHTML = select_html;
		document.getElementById("side_bar").innerHTML = side_bar_html;
          }
        }
        request.send(null);
      }
      
      // When initially loaded, use the data from "file1.xml"
      readMap("http://www.skyshot.co.uk/maps/xml/food.xml");
      
    }

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