if (GBrowserIsCompatible()) {
    
      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var htmls = [];
      var i = 0;
      
      // Wireless network     
      var wirelessIcon = new GIcon();
      wirelessIcon.image = "/images/wireless.png";
      wirelessIcon.shadow = "";
      wirelessIcon.iconSize = new GSize(30, 30);
      wirelessIcon.shadowSize = new GSize(36, 40);
      wirelessIcon.iconAnchor = new GPoint(5, 40);
      wirelessIcon.infoWindowAnchor = new GPoint(25, 7);
      wirelessIcon.infoShadowAnchor = new GPoint(14, 25);
      wirelessIcon.transparent = "";
      wirelessIcon.printImage = "";
      wirelessIcon.mozPrintImage = "";
      // DINING OPTIONS      
      var dineIcon = new GIcon();
      dineIcon.image = "/images/dining.png";
      dineIcon.shadow = "";
      dineIcon.iconSize = new GSize(30, 30);
      dineIcon.shadowSize = new GSize(36, 40);
      dineIcon.iconAnchor = new GPoint(5, 40);
      dineIcon.infoWindowAnchor = new GPoint(25, 7);
      dineIcon.infoShadowAnchor = new GPoint(14, 25);
      dineIcon.transparent = "";
      dineIcon.printImage = "";
      dineIcon.mozPrintImage = "";
      // GENERAL USE COMPUTER LABS      
      var labIcon = new GIcon();
      labIcon.image = "/images/computer_labs.png";
      labIcon.shadow = "";
      labIcon.iconSize = new GSize(30, 30);
      labIcon.shadowSize = new GSize(36, 40);
      labIcon.iconAnchor = new GPoint(5, 40);
      labIcon.infoWindowAnchor = new GPoint(25, 7);
      labIcon.infoShadowAnchor = new GPoint(14, 25);
      labIcon.transparent = "";
      labIcon.printImage = "";
      labIcon.mozPrintImage = "";
      // VCU Connector      
      var transitIcon = new GIcon();
      transitIcon.image = "/images/transit_stop.png";
      transitIcon.shadow = "";
      transitIcon.iconSize = new GSize(40, 40);
      transitIcon.shadowSize = new GSize(36, 40);
      transitIcon.iconAnchor = new GPoint(5, 40);
      transitIcon.infoWindowAnchor = new GPoint(25, 7);
      transitIcon.infoShadowAnchor = new GPoint(14, 25);
      transitIcon.transparent = "";
      transitIcon.printImage = "";
      transitIcon.mozPrintImage = "";
      
      // VCU Parking Deck      
      var parkIcon = new GIcon();
      parkIcon.image = "/images/parking_deck.png";
      parkIcon.shadow = "";
      parkIcon.iconSize = new GSize(40, 40);
      parkIcon.shadowSize = new GSize(36, 40);
      parkIcon.iconAnchor = new GPoint(5, 40);
      parkIcon.infoWindowAnchor = new GPoint(25, 7);
      parkIcon.infoShadowAnchor = new GPoint(14, 25);
      parkIcon.transparent = "";
      parkIcon.printImage = "";
      parkIcon.mozPrintImage = "";
      
      // Default Google Marker
      var regIcon = new GIcon();
      regIcon.image = "http://www.google.com/mapfiles/marker.png";
      regIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
      regIcon.iconSize = new GSize(20, 34);
      regIcon.shadowSize = new GSize(37, 34);
      regIcon.iconAnchor = new GPoint(9, 34);
      regIcon.infoWindowAnchor = new GPoint(9, 2);
      regIcon.infoShadowAnchor = new GPoint(18, 25);
      regIcon.transparent = "http://www.google.com/intl/en_ALL/mapfiles/markerTransparent.png";
      regIcon.printImage = "http://www.google.com/mapfiles/marker.png";
      regIcon.mozPrintImage = "http://www.google.com/mapfiles/marker.png";
 
    // === Create an associative array of GIcons() ===
      var icons = [];
      icons["transit"] = transitIcon;
      icons["parking"] = parkIcon;
      icons["labs"] = labIcon;
      icons["dining"] = dineIcon;
      icons["wireless"] = wirelessIcon;
      icons[1] = regIcon;
      // arrays to hold variants of the info window html with get direction forms open
      var to_htmls = [];
      var from_htmls = [];
      // 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]);
// === store the name so that the tooltip function can use it ===
        marker.tooltip = '<div class="tooltip">'+name+'<\/div>';
        
        // === Store the icontype and name info as a marker properties ===
        marker.myicontype = icontype;                                 
        marker.myname = name;
        // The info window version with the "to here" form open
        to_htmls[i] = html + '<p style="float:left; width:230px; font-family:arial, helvetica, sans serif; font-size:0.75em">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="" />&nbsp;' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
                  // "(" + name + ")" + 
           '"/><\/p>';
        // The info window version with the "to here" form open
        from_htmls[i] = html + '<p style="float:left; width:230px; font-family:arial, helvetica, sans serif; font-size:0.75em">Directions: <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="" />&nbsp;' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" + 
           '"/><\/p>';
        // The inactive version of the direction info
        html = html + '<p style="float:left; width:230px; font-family:arial, helvetica, sans serif; font-size:0.75em">Directions: <a href="javascript:tohere('+i+')">To here<\/a> - <a href="javascript:fromhere('+i+')">From here<\/a><\/p>';
        
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        
//  ======  The new marker "mouseover" and "mouseout" listeners  ======
        GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
        tooltip.style.visibility="hidden"
        });
        
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;        
        htmls[i] = html;
        i++;
        return marker;
      }
      
// ====== This function displays the tooltip ======
      // it can be called from an icon mousover or a side_bar mouseover
      function showTooltip(marker) {
          tooltip.innerHTML = marker.tooltip;
    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,- offset.y + point.y +anchor.y)); 
    pos.apply(tooltip);
    tooltip.style.visibility="visible";
      }
      
      // == shows all markers of a particular icontype, and ensures the checkbox is checked ==
      function show(icontype) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].myicontype == icontype) {
            gmarkers[i].show();
          }
        }
        // == check the checkbox ==
        document.getElementById(icontype+"box").checked = true;
      }
      // == hides all markers of a particular icontype, and ensures the checkbox is cleared ==
      function hide(icontype) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].myicontype == icontype) {
            gmarkers[i].hide();
          }
        }
        // == clear the checkbox ==
        document.getElementById(icontype+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        map.closeInfoWindow();
      }
      // == a checkbox has been clicked ==
      function boxclick(box,icontype) {
        if (box.checked) {
          show(icontype);
        } else {
          hide(icontype);
        }
        // == rebuild the side bar
        makeSidebar();
      }
      function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
      }
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }
      // functions that open the directions forms
      function tohere(i) {
        gmarkers[i].openInfoWindowHtml(to_htmls[i]);
      }
      function fromhere(i) {
        gmarkers[i].openInfoWindowHtml(from_htmls[i]);
      }
      //CREATE THE MAP
      var map = new GMap2(document.getElementById("map"));  
      map.setCenter(new GLatLng(37.54342040423406, -77.43962287902832), 14);
      map.setUIToDefault();
      geocoder = new GClientGeocoder();
      
// ====== set up marker mouseover tooltip div ======
      var tooltip = document.createElement("div");
      document.getElementById("map").appendChild(tooltip);
      tooltip.style.visibility="hidden";
      // MAP OVERVIEW      
      //  ======== Add a map overview ==========
      map.addControl(new GOverviewMapControl(new GSize(150,150)));
      //  ======== 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 white";
        omap.firstChild.firstChild.style.left="4px";
        omap.firstChild.firstChild.style.top="4px";
        omap.firstChild.firstChild.style.width="190px";
        omap.firstChild.firstChild.style.height="190px";
      }
      //  ======== Cause the overview to be positioned AFTER IE sets its initial position ======== 
      setTimeout("positionOverview(937,599)",1);
      // Read the data from map.xml
      var request = GXmlHttp.create();
      request.open("GET", "/js/map_xml.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 = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
            var label = markers[i].getAttribute("label");
            var icontype = markers[i].getAttribute("icontype");
            // create the marker
            var marker = createMarker(point,label,html,icontype);
            map.addOverlay(marker);
          }
          // ========= Now process the polylines ===========
          var lines = xmlDoc.documentElement.getElementsByTagName("line");
          // read each line
          for (var a = 0; a < lines.length; a++) {
            // get any line attributes
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
            var pts = [];
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
            }
            map.addOverlay(new GPolyline(pts,colour,width));
          }
          // ================================================ 
          // == show or hide the categories initially ==
          hide("transit");
          hide("parking");
          hide("labs");
          hide("dining");
          hide("wireless");
        }
        
      }
      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");
    }