//<![CDATA[
    if (GBrowserIsCompatible()) {
      var side_bar_html = "";
      var gmarkers = [];
      var htmls = [];
      var i = 0;
   		var tooltip = document.createElement("div");
// A function to create the marker and set up the event window
			function createMarker(point,name,html) {
	    		var campIcon = new GIcon();
				campIcon.image = "marina.png";
				campIcon.shadow = "shadow.png";
				campIcon.iconSize = new GSize(21, 31);
				campIcon.shadowSize = new GSize(52, 29);
				campIcon.iconAnchor = new GPoint(6, 31);
				campIcon.infoWindowAnchor = new GPoint(6, 1);
				campIcon.infoShadowAnchor = new GPoint(14, 25);
				var marker = new GMarker(point,campIcon);
// === store the name so that the tooltip function can use it ===
				marker.tooltip = '<div class="tooltip">'+name+'</div>';
				GEvent.addListener(marker, "click", function() {
			      marker.openInfoWindowHtml(html);}	);
				gmarkers[i] = marker;
				htmls[i] = html;
				side_bar_html += '<a href="javascript:myclick(' + i + ')" onmouseover="mymouseover('+i+')" onmouseout="mymouseout()"><span class="county_list">' + name + '</span></a><br>';
// ====== set up marker mouseover tooltip div ======
   			map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
//  ======  The new marker "mouseover" and "mouseout" listeners  ======
				GEvent.addListener(marker,"mouseover", function() {
			      showTooltip(marker); });        
				GEvent.addListener(marker,"mouseout", function() {
					tooltip.style.visibility="hidden"; }); 
				i++;
				return marker;       
			}
// ====== This function displays the tooltip ======
// it can be called from an icon mousover or a sidebar mouseover
			function showTooltip(marker) {
  				tooltip.innerHTML = marker.tooltip;
				var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
				var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
				var anchor=marker.getIcon().iconAnchor;
				var width=marker.getIcon().iconSize.width;
				var height=tooltip.clientHeight;
				var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height)); 
				pos.apply(tooltip);
				tooltip.style.visibility="visible";
			}
// ===== This function is invoked when the mouse goes over an entry in the sidebar =====
// It launches the tooltip on the icon      
			function mymouseover(i) {
   			showTooltip(gmarkers[i]);
			}
// ===== This function is invoked when the mouse leaves an entry in the sidebar =====
			function mymouseout() {
				tooltip.style.visibility="hidden";
			}

// This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }
			function showZooms(){
				var mapZoom=map.getZoom();
				var miniZoom=mini.getZoom();
			}
			
// create the map
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(52.571346,2.581787),4);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      
      map.enableContinuousZoom();
      map.enableDoubleClickZoom();
			map.zoomIn();
			document.getElementById("map").style.top="0px";
			document.getElementById("map").style.left="0px";
			document.getElementById("map").style.width="600";
			var hght=document.documentElement.clientHeight*1.0;
		  map.hideControls();
		  GEvent.addListener(map, "mouseover", function(){
		  map.showControls();
		  });
      GEvent.addListener(map, "mouseout", function(){
      map.hideControls(); 
      });

// A function to read the data

      function readMap() {
				var bounds = new GLatLngBounds();
        	var request = GXmlHttp.create();
        	request.open("GET","ferries.xml", 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="";
	          	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);
            	 }
          // ========= Now process the polylines ===========
          		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")));
            		}
           		var poly = new GPolyline(pts,colour,width);
		           map.addOverlay(poly);
	          }
          // ================================================           
          }
        }
        request.send(null);
      }
      readMap();
   	}
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/   
    // http://www.econym.demon.co.uk/googlemaps/

    //]]>