function load() {
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.    

       // this variable will collect the html which will eventually be placed in the side_bar
       var side_bar_html = "";

       // arrays to hold copies of the markers and html used by the side_bar
       // because the function closure trick doesnt work there
       var gmarkers = [];
       var lastlinkid;


       var baseIcon = new GIcon();
          baseIcon.iconSize=new GSize(32,32);
          baseIcon.shadowSize=new GSize(56,32);
          baseIcon.iconAnchor=new GPoint(16,32);
          baseIcon.infoWindowAnchor=new GPoint(16,0);

       var patrimoine = new GIcon(baseIcon, "http://www.tourisme-coeurdelomagne.fr/images/picto-patrimoine.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon21s.png");    
       var rando = new GIcon(baseIcon, "http://www.tourisme-coeurdelomagne.fr/images/picto-rando.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon21s.png");    
       var tennis = new GIcon(baseIcon, "http://www.tourisme-coeurdelomagne.fr/images/picto-tennis.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon21s.png");    
       var escalade = new GIcon(baseIcon, "http://www.tourisme-coeurdelomagne.fr/images/picto-escalade.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon21s.png");    


      function createMarker(point,name,html,icon) {
        var marker = new GMarker(point,icon);
        var linkid = "link"+(gmarkers.length);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
          document.getElementById(linkid).style.background="#ffff00";
          lastlinkid=linkid;
        });
        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        // add a line to the side_bar html
        side_bar_html += '<div id="'+linkid+'"><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a></br></div>';
        return marker;
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
         GEvent.trigger(gmarkers[i], "click");
      }

      // 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(43.8805725486201,0.7875823974609375),13);

       // Set up three markers with info windows 
    
      var point = new GLatLng(43.87463315746137,0.802001953125);
      var marker = createMarker(point,'Escalade à Avezan','<div style="width:240px">Escalade</div>', escalade)
      map.addOverlay(marker);

      var point = new GLatLng(43.89283613634179,0.7677018642425537);
      var marker = createMarker(point,'Chemin d\'Ayrem','<div style="width:240px">Côte du curé et chemin d\'Ayrem</div>', rando)
      map.addOverlay(marker);

      var point = new GLatLng(43.89021893059072,0.7682597637176514);
      var marker = createMarker(point,'Chemin du Fenouilha','<div style="width:240px">Chemin du Fenouilha</div>', rando)
      map.addOverlay(marker);

      var point = new GLatLng(43.89405771738065,0.7651269435882568);
      var marker = createMarker(point,'Chemin du Truquet','<div style="width:240px">Chemin du Truquet</div>', rando)
      map.addOverlay(marker);

      var point = new GLatLng(43.89597508518694,0.7696276903152466);
      var marker = createMarker(point,'Chemin de la Benazide','<div style="width:240px">Chemin de la Benazide</div>', rando)
      map.addOverlay(marker);

      var point = new GLatLng(43.86335209803797,0.811089277267456);
      var marker = createMarker(point,'Chemin Notre Date de Tudet','<div style="width:240px">Sur le chemin de Notre Dame de Tudet (pédestre)</div>', rando)
      map.addOverlay(marker);

      var point = new GLatLng(43.89252687134444,0.7671225070953369);
      var marker = createMarker(point,'La Boucle de l\'Auroue','<div style="width:240px">La Boucle de l\'Auroue (pédestre et VTT)</div>', rando)
      map.addOverlay(marker);

      var point = new GLatLng(43.89444815413716,0.7719933986663818);
      var marker = createMarker(point,'Sentier Saint-Clar – Lavit','<div style="width:240px">Le sentier Saint-Clar – Lavit (pédestre)</div>', rando)
      map.addOverlay(marker);

      var point = new GLatLng(43.86267524393041,0.8151555061340332);
      var marker = createMarker(point,'Tennis à Tournecoupe','<div style="width:240px">Tennis</div>', tennis)
      map.addOverlay(marker);
      
      var point = new GLatLng(43.88870731623371,0.7644510269165039);
      var marker = createMarker(point,'Tennis à Saint-Clar','<div style="width:240px">Tennis</div>', tennis)
      map.addOverlay(marker);


      GEvent.addListener(map,"infowindowclose", function() {
      document.getElementById(lastlinkid).style.background="#ffffff";
      });


      // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;

    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}

window.onload=load;
window.onunload=GUnload;