//<![CDATA[

    if (GBrowserIsCompatible()) {


      // === Create a custom Control ===
      var labelContainer;

      function LabelControl() {  }
      LabelControl.prototype = new GControl();

      LabelControl.prototype.initialize = function(map) {
        labelContainer = document.createElement("div");
        labelContainer.style.overflow="auto";
        labelContainer.style.backgroundColor = "#FAFAFA";
        labelContainer.style.border = "1px solid black";
        labelContainer.style.height="200px";
        labelContainer.style.width="200px";
        labelContainer.style.paddingLeft="5px";

        map.getContainer().appendChild(labelContainer);
        return labelContainer;
      }

      LabelControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 33));
      }



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




      // === A function to create the marker and set up the event window ===
      var gmarkers = [];
      var i=0;
      var side_bar_html = "";

      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
         // marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;
      }



      // === Create the map ===
      var map = new GMap2(document.getElementById("map"));
//      map.addControl(new GLargeMapControl());
      map.setCenter(new GLatLng(53.88977,-112.45605), 6);
 


      // === add the points ===
      var point = new GLatLng(54.26768,-110.73498);
      var marker = createMarker(point,"BeauVista")
      map.addOverlay(marker);


    }

    //]]>