

    //<![CDATA[



    if (GBrowserIsCompatible()) {

    



      // This function picks up the click and opens the corresponding info window

      function myclick(i) {

        gmarkers[i].openInfoWindowHtml('<div style="white-space:nowrap; width:100px; height:300px;">'+gmarkers[i].my_html+'</div>');

      }





      // create the map

      var map = new GMap(document.getElementById("map"));

      map.addControl(new GLargeMapControl());

      map.addControl(new GMapTypeControl());

      map.centerAndZoom(new GPoint(-74.813343 , 38.987162 ), 2);

      

      // array to hold copies of the markers 

      // we cant scan map.overlays[] because the order of teh entries changes

      var gmarkers = [];

      

      // functions that open the directions forms

      function tohere(i) {

        gmarkers[i].openInfoWindowHtml('<div class="mapitems">'+gmarkers[i].to_html+'</div>');

      }

      function fromhere(i) {

        gmarkers[i].openInfoWindowHtml('<div style="white-space:nowrap;">'+gmarkers[i].from_html+'</div>');

      }







      // Read the data from example.xml

      var request = GXmlHttp.create();

      request.open("GET", "location.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 GPoint(lng,lat);

            var html = markers[i].getAttribute("html");

            var label = markers[i].getAttribute("label");

            // create the marker

            var marker = new GMarker(point);

			

            // Build the extra html that handles the directions links and forms

            //     The inactive version of the direction info

            marker.my_html = html + '<br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>';

            //     The version with the "to here" form open

            marker.to_html = 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=20 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +

                  '<INPUT value="Get Directions" TYPE="SUBMIT" class="directions_btn">' +

                  '<input type="hidden" name="daddr" value="' +

                  point.y + ',' + point.x + "(" + label + ")" + '"/>';

            //     The version with the "to here" form open

            marker.from_html = html + '<br>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=20 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +

                  '<INPUT value="Get Directions" TYPE="SUBMIT" class="directions_btn>' +

                  '<input type="hidden" name="saddr" value="' +

                  point.y + ',' + point.x + "(" + label + ")" + '"/>';

            marker.my_name = label;

            map.addOverlay(marker);

            gmarkers.push(marker);

          }

          // this variable will collect the html which will eventually be placed in the sidebar

          var sidebar_html = "";

      

          // scan through the gmarkers[] array assembling the sidebar html

          for (var i=0; i < gmarkers.length; i++) {

            if (gmarkers[i].my_name) {

          sidebar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].my_name + '</a><br>';

            }

          }        



          // put the assembled sidebar_html contents into the sidebar div

          <!--document.getElementById("sidebar").innerHTML = sidebar_html;-->

        }

      }

      request.send(null);



      GEvent.addListener(map, "click", function(overlay, point) {

        if (overlay) {

          if (overlay.my_html) {

            overlay.openInfoWindowHtml('<div style="white-space:nowrap;">'+overlay.my_html+'</div>');

          }

        }

      });      

    }



    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/



    //]]>

