//<![CDATA[

    if (GBrowserIsCompatible()) {

      // this variable will collect the html which will eventualkly be placed in the side_bar
      var side_bar_html = "<b>Attractions in and around London<br /><br />Please select from the list below or click on a marker to the left<\/b><br /><br />";

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


      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        // use a custom icon with letter A - Z
        var letter = String.fromCharCode("A".charCodeAt(0) + (gmarkers.length));
        var myIcon = new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker" + letter + ".png");
        myIcon.printImage = "http://maps.google.com/mapfiles/marker"+letter+"ie.gif"
        myIcon.mozPrintImage = "http://maps.google.com/mapfiles/marker"+letter+"ff.gif"

        var marker = new GMarker(point, {icon:myIcon});
        map.addMapType(G_PHYSICAL_MAP) ;
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // 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 += '<b>'+letter+'<\/b> <a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
        return marker;
      }


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


      // create the map
      var map = new GMap2(document.getElementById("map"));
	  map.setUIToDefault();
      map.addControl(new GOverviewMapControl());
      map.setCenter(new GLatLng( 51.5002,-0.1262), 11);

      // add the points
      var point = new GLatLng(51.4439, -0.2759);
      var marker = createMarker(point,"=&nbsp;Richmond Park","Richmond Park")
      map.addOverlay(marker);

      var point = new GLatLng(51.4333, -0.2374);
      var marker = createMarker(point,"=&nbsp;Wimbledon Common","Wimbledon Common")
      map.addOverlay(marker);

      var point = new GLatLng(51.5198, -0.2008);
      var marker = createMarker(point,"=&nbsp;Notting Hill","Notting Hill")
      map.addOverlay(marker);

      var point = new GLatLng(51.4959, -0.1764);
      var marker = createMarker(point,"=&nbsp;National History Museum","National History Museum")
      map.addOverlay(marker);

      var point = new GLatLng(51.5646, -0.1637);
      var marker = createMarker(point,"=&nbsp;Hampstead Heath","Hampstead Heath")
      map.addOverlay(marker);

      var point = new GLatLng(51.5069,-0.1796);
      var marker = createMarker(point,"=&nbsp;Kensington Gardens","Kensington Gardens")
      map.addOverlay(marker);

      var point = new GLatLng(51.5228 , -0.1553);
      var marker = createMarker(point,"=&nbsp;Madame Tussauds","Madame Tussauds")
      map.addOverlay(marker);

      var point = new GLatLng(51.5011,-0.1460);
      var marker = createMarker(point,"=&nbsp;Buckingham Palace Gardens","Buckingham Palace Gardens")
      map.addOverlay(marker);

      var point = new GLatLng(51.5131,-0.1388);
      var marker = createMarker(point,"=&nbsp;Carnaby Street","Carnaby Street")
      map.addOverlay(marker);

      var point = new GLatLng(51.4997, -0.1286);
      var marker = createMarker(point,"=&nbsp;Westminster Abbey","Westminster Abbey")
      map.addOverlay(marker);

      var point = new GLatLng(51.5033 , -0.1197);
      var marker = createMarker(point,"=&nbsp;London Eye","London Eye")
      map.addOverlay(marker);

      var point = new GLatLng(51.4963,-0.1086);
      var marker = createMarker(point,"=&nbsp;Imperial War Museum","Imperial War Museum")
      map.addOverlay(marker);

      var point = new GLatLng(51.5137, -0.0995);
      var marker = createMarker(point,"&nbsp;=&nbsp;St Paul's Cathedral","St Paul's Cathedral")
      map.addOverlay(marker);

      var point = new GLatLng(51.5079, -0.0994);
      var marker = createMarker(point,"=&nbsp;Tate Modern","Tate Modern")
      map.addOverlay(marker);

      var point = new GLatLng(51.5081, -0.0761);
      var marker = createMarker(point,"=&nbsp;Tower of London","Tower of London")
      map.addOverlay(marker);

      var point = new GLatLng(51.5219,-0.0717);
      var marker = createMarker(point,"=&nbsp;Brick Lane","Brick Lane")
      map.addOverlay(marker);

      var point = new GLatLng(51.4406, -0.0608);
      var marker = createMarker(point,"=&nbsp;Horniman Museum","Horniman Museum")
      map.addOverlay(marker);

      var point = new GLatLng(51.5272, -0.0532);
      var marker = createMarker(point,"=&nbsp;Museum of Childhood","Museum of Childhood")
      map.addOverlay(marker);

      var point = new GLatLng(51.4810,-0.0056);
      var marker = createMarker(point,"=&nbsp;National Maritime Museum","National Maritime Museum")
      map.addOverlay(marker);

      var point = new GLatLng(51.4472, 0.0482);
      var marker = createMarker(point,"=&nbsp;Eltham Palace","Eltham Palace")
      map.addOverlay(marker);

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

    }

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

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/
    // http://econym.org.uk/gmap/

    //]]>