﻿    if (GBrowserIsCompatible()) { 

      // A function to create the marker and set up the event window
      // Dont try to unroll this function. It has to be here for the function closure
      // Each instance of the function preserves the contends of a different instance
      // of the "marker" and "html" variables which will be needed later when the event triggers.    
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

      // Display the map, with some controls and set the initial location 
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(54.104287, -2.736969), 11);
    
      // Set up three markers with info windows
      
      	  var point = new GLatLng(54.006502998949486,-2.7888885140419006);
      var marker = createMarker(point,'Lancaster House Hotel')
      map.addOverlay(marker);

      var point = new GLatLng(54.072087, -2.875167);
      var marker = createMarker(point, 'Midland Hotel')
      map.addOverlay(marker);

      var point = new GLatLng(54.045555, -2.781086);
      var marker = createMarker(point, '<div style="width:240px;"><img src="../../Images/attractions/thumbnails/ashton-memorial.jpg" alt="Ashton Memorial building" class="right"  /><h3>Williamson Park</h3><p>54 acre park with panoramic views over the surrounding area.<br /><a href="williamson-memorial.aspx">More...</a></p></div>')
     map.addOverlay(marker);

     var point = new GLatLng(54.074233, -2.733021);
     var marker = createMarker(point, '<div style="width:240px;"><img src="../../images/crook_o_lune.jpg" alt="Crook O Lune" width="80" height="80" class="right" /><h3>Crook O Lune</h3><p>Local beauty spot made famous by Turner, the painter of light.<br /><a href="crook-o-lune.aspx">More...</a></p></div>')
     map.addOverlay(marker);

      var point = new GLatLng(54.162904, -2.775668);
      var marker = createMarker(point, '<div style="width:240px"><img src="../../Images/attractions/thumbnails/leighton-hall.jpg" alt="Leighton Hall" class="right" /><h3>Leighton Hall</h3><p>Historic home of the world-renowned Gillow furniture family.<br /><a href="leighton-hall.aspx">More...</a></p></div>')
      map.addOverlay(marker);

     var point = new GLatLng(54.168158, -2.802694);
      var marker = createMarker(point, '<div style="width:240px"><img src="../../Images/attractions/thumbnails/bearded-tit.jpg" alt="Bearded Tit" class="right" /><h3>Leighton Moss RSPB</h3><p>Leighton Moss is the largest reedbed in north-west England.<br /><a href="leighton-moss.aspx">More...</a></p></div>')
      map.addOverlay(marker);

      var point = new GLatLng(54.053363, -2.805231);
      var marker = createMarker(point, '<div style="width:240px"><img src="../../Images/attractions/thumbnails/maritime-museum.jpg" alt="A small rowing boat display" class="right" /><h3>Maritime Museum</h3><p>Award winning Maritime Museum celebrating the ports past.<br /><a href="maritime-museum.aspx">More...</a></p></div>')
      map.addOverlay(marker);

      var point = new GLatLng(54.049757, -2.806106);
      var marker = createMarker(point, '<div style="width:240px"><img src="../../Images/attractions/thumbnails/lancaster-castle.jpg" alt="Lancaster Castle" class="right" /><h3>Lancaster Castle</h3><p>12th century castle with a gruesome part in British History.<br /><a href="lancaster-castle.aspx">More...</a></p></div>')
      map.addOverlay(marker);
	  

      
       //  ======== Add a map overview ==========
      map.addControl(new GOverviewMapControl(new GSize(150,150)));

      //  ======== A function to adjust the positioning of the overview ========
      function positionOverview(x,y) {
        var omap=document.getElementById("map_overview");
        omap.style.left = x+"px";
        omap.style.top = y+"px";
        
        // == restyling ==
        omap.firstChild.style.border = "1px solid gray";

        omap.firstChild.firstChild.style.left="2px";
        omap.firstChild.firstChild.style.top="2px";
        omap.firstChild.firstChild.style.width="140px";
        omap.firstChild.firstChild.style.height="140px";
        }
        //  ======== Cause the overview to be positioned AFTER IE sets its initial position ======== 
//      setTimeout("positionOverview(558,254)",1);
    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
