//<![CDATA[
    if (GBrowserIsCompatible()) { 
      // === 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 = "";
      var lastlinkid;
     
      var imagePath = "App_Themes/Main/images/map-icons/";
      var markerShadow = "App_Themes/Main/images/map-icons/balloon-shadow.png";
      var markerTrans = "http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png";
      
      var greenHotel = new GIcon();
              greenHotel.image = imagePath + "grn_hotel.png";
              greenHotel.shadow = markerShadow;
              greenHotel.iconSize = new GSize(20, 34);
              greenHotel.shadowSize = new GSize(37, 34);
              greenHotel.iconAnchor = new GPoint(9, 34);
              greenHotel.infoWindowAnchor = new GPoint(9, 2);
              greenHotel.infoShadowAnchor = new GPoint(18, 25);
              greenHotel.transparent = markerTrans;
      var blueChurch = new GIcon();
              blueChurch.image = imagePath + "blue_church.png";
              blueChurch.shadow = markerShadow;
              blueChurch.iconSize = new GSize(20, 34);
              blueChurch.shadowSize = new GSize(37, 34);
              blueChurch.iconAnchor = new GPoint(9, 34);
              blueChurch.infoWindowAnchor = new GPoint(9, 2);
              blueChurch.infoShadowAnchor = new GPoint(18, 25);
              blueChurch.transparent = markerTrans;
      var redHospital = new GIcon();
              redHospital.image = imagePath + "red_Hospital.png";
              redHospital.shadow = markerShadow;
              redHospital.iconSize = new GSize(20, 34);
              redHospital.shadowSize = new GSize(37, 34);
              redHospital.iconAnchor = new GPoint(9, 34);
              redHospital.infoWindowAnchor = new GPoint(9, 2);
              redHospital.infoShadowAnchor = new GPoint(18, 25);
              redHospital.transparent = markerTrans;
      var orangeCity = new GIcon();
              orangeCity.image = imagePath + "orange_shopping.png";
              orangeCity.shadow = markerShadow;
              orangeCity.iconSize = new GSize(20, 34);
              orangeCity.shadowSize = new GSize(37, 34);
              orangeCity.iconAnchor = new GPoint(9, 34);
              orangeCity.infoWindowAnchor = new GPoint(9, 2);
              orangeCity.infoShadowAnchor = new GPoint(18, 25);
              orangeCity.transparent = markerTrans;
      var icons = [];
      icons[0] = greenHotel;
      icons[1] = blueChurch;
      icons[2] = redHospital;
      icons[3] = orangeCity;
      var images = [];
      images[0] = "yellow_hotel.png";   
      images[1] = "yellow_church.png";
      images[2] = "yellow_Hospital.png";
      images[3] = "yellow_shopping.png";
      
      function createMarker(point,name,html,icontype) {
        var marker = new GMarker(point,icons[icontype]);
        var linkid = +i
        
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
          lastlinkid=linkid;          
        });
        
        GEvent.addListener(marker, "mouseover", function() {
          marker.setImage(imagePath+images[icontype]);
        });
        GEvent.addListener(marker, "mouseout", function() {
          marker.setImage(icons[icontype].image);
        });
        // 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 += '<div id="'+linkid+'" class="linkClass">';
        side_bar_html += '<a onmouseover="gmarkers['+i+'].setImage(\''+imagePath+images[icontype]+'\')" onmouseout="gmarkers['+i+'].setImage(\''+icons[icontype].image+'\')" href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        side_bar_html += '</div>';
        i++;
        return marker;
      }
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.setCenter(new GLatLng(34.052013, -117.269175),13);
    
      // === put the assembled side_bar_html contents into the custom control ===
     // Read the data from example.xml
      var request = GXmlHttp.create();
      request.open("GET", "POI.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          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");
            var icontype = parseInt(markers[i].getAttribute("icontype"));
            // create the marker
            var marker = createMarker(point,label,html,icontype);
            map.addOverlay(marker);
        }
         GEvent.addListener(map,"infowindowclose", function() {
         document.getElementById(lastlinkid).style.background="transparent";
         });
         
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("sideBar").innerHTML = side_bar_html;
        }
      }   
      
//      document.getElementById("sideBar").innerHTML = side_bar_html;
      //  ======== Add a map overview ==========
//      map.addControl(new GOverviewMapControl(new GSize(190,140)));

//      //  ======== 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="4px";
//        omap.firstChild.firstChild.style.top="4px";
//        omap.firstChild.firstChild.style.width="190px";
//        omap.firstChild.firstChild.style.height="140px";
//      }

//      //  ======== Cause the overview to be positioned AFTER IE sets its initial position ======== 
//      setTimeout("positionOverview(558,0)",1);
      request.send(null);
   }
    
    // display a warning if the browser was not compatible
    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://econym.googlepages.com/index.htm

    //]]>