if (GBrowserIsCompatible())
{
	// this variable will collect the html which will eventually be placed in the GMapSidebar
    var GMapSidebar_html = "";
    
	// arrays to hold copies of the markers and html used by the GMapSidebar
    // because the function closure trick doesnt work there
	var gmarkers = [];
	var htmls = [];
	var i = 0;
    
	// arrays to hold variants of the info window html with get direction forms open
    var to_htmls = [];
    var from_htmls = [];
	  
	// Create some custom icons
			
	// Create green arrow icon
	var greenIcon = new GIcon();
	greenIcon.image = "/images/marker_1.png";
	greenIcon.shadow = "/images/marker_shadow.png";
	greenIcon.iconSize = new GSize(23, 36);
	greenIcon.shadowSize = new GSize(31, 36);
	greenIcon.iconAnchor = new GPoint(6, 20);
	greenIcon.infoWindowAnchor = new GPoint(5, 1);
	greenIcon.infoShadowAnchor = new GPoint(14, 25);
	//greenIcon.transparent = "fingertran.png";
	//greenIcon.printImage = "fingerie.gif";
	//greenIcon.mozPrintImage = "fingerff.gif";
			
	// Create red arrow icon
	var redIcon = new GIcon();
	redIcon.image = "/images/marker_2.png";
	redIcon.shadow = "/images/marker_shadow.png";
	redIcon.iconSize = new GSize(23, 36);
	redIcon.shadowSize = new GSize(31, 36);
	redIcon.iconAnchor = new GPoint(6, 20);
	redIcon.infoWindowAnchor = new GPoint(5, 1);
	redIcon.infoShadowAnchor = new GPoint(14, 25);
	//redIcon.transparent = "fingertran.png";
	//redIcon.printImage = "fingerie.gif";
	//redIcon.mozPrintImage = "fingerff.gif";
      
    // An array of GIcons, to make the selection easier
    var icons = [];
    icons[0] = greenIcon;
    icons[1] = redIcon;

    // A function to create the marker and set up the event window
	function createMarker(point, name, html, icontype)
    {
    	var marker = new GMarker(point, icons[icontype]);
        
        // The info window version with the "to here" form open
        to_htmls[i] = html + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
                  // "(" + name + ")" + 
           '"/>';
		// The info window version with the "to here" form open
        from_htmls[i] = html + '<br><b>Directions:</b> <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" + 
           '"/>';
        // The inactive version of the direction info
        html = html + '<br><b>Directions:</b> <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>';

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


	// This function picks up the click and opens the corresponding info window
	function myclick(i) {	if (gmarkers[i]) gmarkers[i].openInfoWindowHtml(htmls[i]); }

	// functions that open the directions forms
    function tohere(i) { 	if (gmarkers[i]) gmarkers[i].openInfoWindowHtml(to_htmls[i]); }
    function fromhere(i) { 	if (gmarkers[i]) gmarkers[i].openInfoWindowHtml(from_htmls[i]); }


	// create the map
    var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(mapCtr, mapZoom);
	  
	// Read the data from directions.xml
    var request = GXmlHttp.create();
    request.open("GET", mapXML, true);
    request.onreadystatechange = function()
    {
    	if (request.readyState == 4)
        {
			var xmlDoc = request.responseXML;
			
          	// 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 attributes of each marker
            	var lat = parseFloat(markers[i].getAttribute("lat"));
            	var lng = parseFloat(markers[i].getAttribute("lng"));
            
				if (!isNaN(lat) && !isNaN(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);
            	}
			}
          
		//makes first infoWindow open upon page load
		myclick(0);
		  
		// put the assembled GMapSidebar_html contents into the GMapSidebar div
        var sidebar = document.getElementById("GMapSidebar");
        if (sidebar) sidebar.innerHTML = GMapSidebar_html;
		}
	}
	
	request.send(null);
}
else alert("Sorry, the Google Maps API is not compatible with this browser");