if (GBrowserIsCompatible()) {
  // variable to collect the html placed in the map picker
  var mapPicker_html = "";

  // arrays to hold copies of the markers and html used by the map picker
  // 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 custom marker
  var Icon = new GIcon();
	      Icon.image = "img/map/marker.png";
	      Icon.iconSize = new GSize(28, 28);
	      Icon.shadow = "img/map/marker_shadow.png";
	      Icon.shadowSize = new GSize(48, 28);
	      Icon.iconAnchor = new GPoint(9, 28);
	      Icon.infoWindowAnchor = new GPoint(25, 1);
	      Icon.transparent = "img/map/marker_transparent.png";
	      Icon.printImage = "img/map/marker.gif";
	      Icon.mozPrintImage = "img/map/marker_ff.gif";
	      Icon.printShadow = "img/map/marker_shadow.gif";
	      Icon.imageMap=[8,27,7,19,2,19,2,0,26,0,26,20,14,19,8,27];

  // A function to create the marker and set up the event window
  function createMarker(point,name,html) {
    var marker = new GMarker(point,Icon);

    // The info window version with the "from here" form open
    to_htmls[i] = html + '<br><span class="mapInfo">Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a></span>' +
       '<br><span class="mapInfo">Start address:</span><form action="http://maps.google.com/maps" method="get" target="_blank">' +
       '<input type="text" SIZE=50 MAXLENGTH=50 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><span class="mapInfo">Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b></span>' +
       '<br><span class="mapInfo">End address:</span><form action="http://maps.google.com/maps" method="get"" target="_blank">' +
       '<input type="text" SIZE=50 MAXLENGTH=50 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><span class="mapInfo">Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a></span>';

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


  // 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.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new GOverviewMapControl());
  map.setCenter(new GLatLng(37.595329,-122.162640), 9, G_SATELLITE_MAP);


  // Read the data from clinics.xml
  var request = GXmlHttp.create();
  request.open("GET", "clinics.xml", 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 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");
        // create the marker
        var marker = createMarker(point,label,html);
        map.addOverlay(marker);
      }
      // put the assembled map picker_html contents into the map picker div
      document.getElementById("mapPicker").innerHTML = mapPicker_html;
    }
  }
  request.send(null);
}

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://www.econym.demon.co.uk/googlemaps/