//<![CDATA[

    if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventualkly be placed in the side_bar
      var side_bar_html = '';
	  var main_html = '';
	  var dest_html = '<br><a href="#destinations" name="destinations" id="header_destinations" class="header">Destinations</a><p id="destinations" style="display: none">';
	  var hotel_html = '</p><a href="#hotels" name="hotels" id="header_hotels" class="header">Hotels</a><p id="hotels" style="display: none">';
	  var food_html = '</p><a href="#restaurants" name="restaurants" id="header_restaurants" class="header">Restaurants</a><p id="restaurants" style="display: none">';
    
      // arrays to hold copies of the markers used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];
	  var gicons = [];
	  var imgdir = "http://labs.google.com/ridefinder/images/";
	  // Icons Categories
	  var baseIcon = new GIcon(); baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; baseIcon.iconSize = new GSize(12, 20); 
	  baseIcon.shadowSize = new GSize(22, 20); baseIcon.iconAnchor = new GPoint(9, 30); baseIcon.infoWindowAnchor = new GPoint(5, 1); 
	  gicons["main"] = new GIcon(baseIcon,imgdir+"mm_20_black.png");
	  gicons["dest"] = new GIcon(baseIcon,imgdir+"mm_20_blue.png");
	  gicons["hotel"] = new GIcon(baseIcon,imgdir+"mm_20_green.png");
	  gicons["food"] = new GIcon(baseIcon,imgdir+"mm_20_yellow.png");

      // A function to create the marker and set up the event window
      function createMarker(point,name,html,cat) {
        var marker = new GMarker(point, gicons[cat]);
        GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml('<h3 style="color:black;">' + name  + '</h3>' + html); });
        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        // add a line to the side_bar html
		switch(cat) {
			case "main":
				main_html = '<img src="'+gicons[cat].image+'"><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a><br>';
				break;
			case "dest":
				dest_html += '<img src="'+gicons[cat].image+'"><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a><br>' + html + '<br>';
				break;
			case "hotel":
				hotel_html += '<img src="'+gicons[cat].image+'"><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a><br>';
				break;
			case "food":
				food_html += '<img src="'+gicons[cat].image+'"><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a><br>';
				break;
			}
        side_bar_html = main_html + dest_html + hotel_html + food_html + "</p>";
        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("google_maps"));
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(33.883633,-118.954846), 8);


      // Read the data from xml
      GDownloadUrl("data.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        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 cat = markers[i].getAttribute("cat");
          // create the marker
          var marker = createMarker(point,label,html,cat);
          map.addOverlay(marker);
        }
        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("destinations_content").innerHTML = side_bar_html;
      });
    }

    else alert("Sorry, the Google Maps API is not compatible with this browser");
    
   
    //]]>