//<![CDATA[
    
    if (GBrowserIsCompatible()) { 

      // ========== Read paramaters that have been passed in ==========
      
      // Before we go looking for the passed parameters, set some defaults
      // in case there are no parameters
      var id;
      var index = -1;
	  var gmarkers = [];
      var idmarkers = [];
	  var sidebar_html = "";
      var htmls = [];
      var i = 0;

      // If there are any parameters at eh end of the URL, they will be in  location.search
      // looking something like  "?marker=3"

      // skip the first character, we are not interested in the "?"
      var query = location.search.substring(1);

      // split the rest at each "&" character to give a list of  "argname=value"  pairs
      var pairs = query.split("&");
      for (var j=0; j<pairs.length; j++) {
	    var pos = pairs[i].indexOf("=");
	    var argname = pairs[j].substring(0,pos).toLowerCase();
	    var value = pairs[j].substring(pos+1).toLowerCase();
        if (argname == "id") {id = unescape(value);}
        if (argname == "marker") {index = parseFloat(value);}
		// variable set on page displaying map
		if( typeof( marker ) != 'undefined' ) {index = marker;}
      }

      // A function to create the marker and set up the event window
      function createMarker(point,id,label,html) {
        var marker = new GMarker(point);
        marker.tooltip = label;
		GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
		  tooltip.style.visibility="hidden"
        });
        // save the info we need to find this marker
		gmarkers.push(marker);
        idmarkers[id.toLowerCase()] = marker;
		htmls[i] = html;
		sidebar_html += '<li><a href="javascript:myclick(' + i + ')" onmouseover="mymouseover('+i+')" onmouseout="mymouseout()">' + label + '</a></li>';
	    i++;
		map.addOverlay(marker);
		//  ======  The new marker "mouseover" and "mouseout" listeners  ======
	    GEvent.addListener(marker,"mouseover", function() {
	     showTooltip(marker);
	    });        
	    GEvent.addListener(marker,"mouseout", function() {
	     tooltip.style.visibility="hidden"
	    });
       // return marker;
      }

      // ====== This function displays the tooltip ======
	  // it can be called from an icon mouseover or a sidebar mouseover
	  function showTooltip(marker) {
		//tooltip.innerHTML = '<table border="0" cellspacing="0" cellpadding="0" height="19"><tr><td align="left" valign="middle" width="18"><img src="support/images/general/arrow.gif" alt="" height="19" width="18" border="0"></td><td class="tooltip" align="center" valign="middle" nowrap>'+marker.tooltip+'</td></tr></table>';
		tooltip.innerHTML = '<div class="marker_tooltip"><span>'+marker.tooltip+'</span></div>';
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
		var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
		var anchor=marker.getIcon().iconAnchor;
		var width=marker.getIcon().iconSize.width;
		var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize((offset.x - point.x - anchor.x + width)+0,(- offset.y + point.y +anchor.y)-30)); 
		pos.apply(tooltip);
		tooltip.style.visibility="visible";
	  }
	
	  // ===== This function is invoked when the mouse goes over an entry in the sidebar =====
	  // It launches the tooltip on the icon      
	  function mymouseover(i) {
		showTooltip(gmarkers[i])
	  }
	  // ===== This function is invoked when the mouse leaves an entry in the sidebar =====
	  // It hides the tooltip      
	  function mymouseout() {
		tooltip.style.visibility="hidden";
	  }
	
	  // This function picks up the sidebar click and opens the corresponding info window
	  function myclick(i) {
		gmarkers[i].openInfoWindowHtml(htmls[i]);
		tooltip.style.visibility="hidden";
	  }
	  
	  // == Create the map ==
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(41.65,-93.65), 9);
	  
	  // ====== set up marker mouseover tooltip div ======
      var tooltip = document.createElement("div");
      document.getElementById("map").appendChild(tooltip);
      tooltip.style.visibility="hidden";

      // Read the data from example.xml
      var request = GXmlHttp.create();
      request.open("GET", "../support/xml/google_map.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 label = markers[i].getAttribute("label");
			var thumbnail = markers[i].getAttribute("thumbnail");
			var address = markers[i].getAttribute("address");
            var description = markers[i].getAttribute("description");
			var page_link = markers[i].getAttribute("page_link");
			var html = '<div class="map_bubble_wrapper">';
			var html = html +  '<div class="label">'+label+'</div>';
			if (thumbnail != "") {
				var html = html + '<div class="thumbnail"><img src="../support/images/facilities/'+thumbnail+'" width="300" height="150" alt="MWA Facility" /></div>';
			}
			if (description != "") {
				//var html = html + '<div style="overflow:auto; height:125px; width:300px; margin-bottom:10px">'+description+'</div>';
				var html = html + '<div class="description">'+description+'</div>';
			}
			if ((page_link != "")&&(i != index)) {
				var html = html + '<a class="bottom_link" href="'+page_link+'">Additional Information</a>';
			}
			if (address != "") {
				var html = html + '<a class="bottom_link" href="http://maps.google.com/maps?saddr=&daddr='+address+'" target="_blank">Get Directions</a>';
			}
			var html = html +  '</div>';
            // create the marker
            var marker = createMarker(point,thumbnail,label,html);
           // map.addOverlay(marker);
          }
		  // put the assembled sidebar_html contents into the sidebar div if exists
		  if (document.getElementById("sidebar") != null) {
		  	//document.getElementById("sidebar").innerHTML = '<ul>'+sidebar_html+'</ul>';
		  }
		  // ========= If a parameter was passed, open the info window ==========
          if (id) {
            if (idmarkers[id]) {
              GEvent.trigger(idmarkers[id],"click");
            } else {
              alert("id "+id+" does not match any marker");
            }
          }
          if (index > -1) {
            if (index < gmarkers.length) {
              GEvent.trigger(gmarkers[index],"click");
            } else {
              alert("marker "+index+" does not exist");
            }
          }


        }
      }
      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");
    }