function load(){

	if (GBrowserIsCompatible()) {

		// ### Target the map at the div named 'map' ###
		var map = new GMap2(document.getElementById("map"));

		// ### Add the controls ###
		map.addControl(new GMapTypeControl());
		map.addControl(new GSmallZoomControl());
		map.addControl(new GScaleControl());

		// ### Set the map center ###
		map.setCenter(new GLatLng(40.29218, -74.07412), 10);

		// ####  Call the local drawMarkers() function to display the markers that
		// ####  fall within the boundries of the current map view 
		drawMarkers(map);


		// ####  Let's capture the interactive actions of zooming and panning within the map as events ####
		// ####  This will change the boundries of the view ... forcing a redraw of the markers ####
		// ####  Only the markers that fall within the view window will be drawn in getMarkersToDisplay() ####
		// ####  The boundries of the new map view (in long/lat values) are determined in drawMarkers() ####

		GEvent.addListener(map, "zoomend", function() {
			//alert("I see this zoom");
			drawMarkers(map);
		});

		GEvent.addListener(map, "dragend", function() {
			//alert("I see this dragend");
			drawMarkers(map);
		});   
     
		GEvent.addListener(map, "maptypechanged", function() {		// not sure if this requires any action
			//alert("I see this map type change");
		});

	}	// end - if (GBrowserIsCompatible())

	else {

      		alert("Sorry, the Google Maps API is not compatible with this browser");

	}  // end - if (GBrowserIsCompatible())


}  // end - function load ()





function drawMarkers(map){		

	//alert("in drawMarkers()");	
	// this is called upon initial load or after any view change w/ pan or zoom

	var currentZoom = map.getZoom();	// get the current zoom level
	//alert("currentZoom: " + currentZoom);

		if (currentZoom > 2){

			// #### Get the outer boundries of the current map view ####

			var bounds = map.getBounds();		// get outer bounds of current view
			var northEast = bounds.getNorthEast();	// get the north east corner as a lng lat object
			var southWest = bounds.getSouthWest();	// get the south west corner as a lng lat object
			var neLat = northEast.lat();		// get the lat value from the north east object
			var neLng = northEast.lng();		// get the lng value from the north east object
			var swLat = southWest.lat();		// same for sw object
			var swLng = southWest.lng();
		
			//alert("recomputing markers to display");

			map.clearOverlays();			// clears all the current markers

			getMarkersToDisplay(map, neLat, neLng, swLat, swLng);		// local function that iterates only the markers that 
											// fall within the four long/lat values above
		}
		else{
			alert("Zoom in further to see the markers");
		}
		
}  // end - function drawMarkers()




function getMarkersToDisplay(map, maxLat, maxLng, minLat, minLng){

	var i;
	var name;
	var lat;	
	var lng;
	var html;
	var label;
	var address;
	var locationString;
	var icon;
	var notes;
	var other;
	var difficulty;
	var dateplaced;
	var cachetype;
	var clues;
	var description;
	var directions;
	
	var latAlt;
	var lngAlt;
	var latAltDeg;
	var lngAltDeg;
	var latAltMin;
	var lngAltMin;

	var pointIndex;
	var compassRef;

	//alert ("before check for map.xml");

	// Read the data from map.xml
//	var request = GXmlHttp.create();
//	request.open("GET", "markers.xml", true);

	//alert ("readyStateChange:" + request.readyState);

//	request.onreadystatechange = function() {


//		if (request.readyState == 4) {

			//alert ("readyState = 4");
//			var xmlDoc = request.responseXML;

			// obtain the array of markers and loop through it
			var markers = xmlDoc.getElementsByTagName("marker");

			//alert ("markers.length: " + markers.length);
	
			for (var i = 0; i < markers.length; i++) {

				//xmlDoc=loadXMLDoc("books.xml");
				var attrList = xmlDoc.getElementsByTagName("marker")[i].attributes;
				var cacheId = attrList.getNamedItem("id").nodeValue;

			//	if (cacheId == detailId){				// this is the one we want ... the id passed in on the query string
			
					lat = xmlDoc.getElementsByTagName("lat")[i].childNodes[0].nodeValue;
					lng = xmlDoc.getElementsByTagName("lng")[i].childNodes[0].nodeValue;

					if ((lat < maxLat) && (lat > minLat) && (lng < maxLng) && (lng > minLng)){

						name = xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
						html = xmlDoc.getElementsByTagName("html")[i].childNodes[0].nodeValue;
						label = xmlDoc.getElementsByTagName("label")[i].childNodes[0].nodeValue;
						address = xmlDoc.getElementsByTagName("address")[i].childNodes[0].nodeValue;
						locationString = xmlDoc.getElementsByTagName("locationString")[i].childNodes[0].nodeValue;
						icon = xmlDoc.getElementsByTagName("icon")[i].childNodes[0].nodeValue;
						notes = xmlDoc.getElementsByTagName("notes")[i].childNodes[0].nodeValue;
						other = xmlDoc.getElementsByTagName("other")[i].childNodes[0].nodeValue;
						difficulty = xmlDoc.getElementsByTagName("difficulty")[i].childNodes[0].nodeValue;
						cachetype = xmlDoc.getElementsByTagName("cachetype")[i].childNodes[0].nodeValue;
						dateplaced = xmlDoc.getElementsByTagName("dateplaced")[i].childNodes[0].nodeValue;

						// alert("cache: " + name + "(" + cacheId + ")");

						// ####   Format the long/lat as deg mm.mmm    ####

						latAltDeg = parseInt(lat);				// parse the integer part

						if(latAltDeg > 0){
							compassRef = "N";
						}
						if(latAltDeg < 0){
							compassRef = "S";
							latAltDeg = latAltDeg.substr(2);
					
						}

						pointIndex = lat.indexOf(".");				// find the decimal point position
						latAltMin = lat.substr(pointIndex); 			// parse the decimal part
						latAltMin = latAltMin * 60;				// return to the mm.mmmmm format
						latAltMin = latAltMin.toFixed(3);			// format to 3 sig digits
	
						if (latAltMin < 10){
							latAltMin = "0" + latAltMin;
						}

						latAlt = latAltDeg + String.fromCharCode(176) + " " + latAltMin + " " + compassRef;	// format with the degree circle and combine with the formatted minutes

						lngAltDeg = parseInt(lng);

						if(lngAltDeg > 0){
							compassRef = "E";
						}
						if(lngAltDeg < 0){
							compassRef = "W";
							lngAltDeg = lngAltDeg.toString();
							lngAltDeg = lngAltDeg.substr(1);
						}	

						pointIndex = lng.indexOf(".");
						lngAltMin = lng.substr(pointIndex);
						lngAltMin = lngAltMin * 60	;
						lngAltMin = lngAltMin.toFixed(3);
	
						if (lngAltMin < 10){
							lngAltMin = "0" + lngAltMin;
						}

						lngAlt = lngAltDeg + String.fromCharCode(176) + " " + lngAltMin + " " + compassRef;
			


						html = '<nobr><span style="line-height: 12pt; font-size: 12pt; font-weight: 600;">' + name + '</span><span style="line-height: 2pt; font-size: 2pt; font-weight: 500;"><br><br></span><span style="line-height: 9pt; font-size: 9pt; font-weight: 500;">Longitude: </span><span style="line-height: 8pt; font-size: 8pt; color: #0000ff;">' + lngAlt + '</span><span style="line-height: 7pt; font-size: 7pt;">&nbsp;&nbsp;&nbsp;(' + lng + ')<br><span style="line-height: 9pt; font-size: 9pt; font-weight: 500;">Lattitude: </span><span style="line-height: 8pt; font-size: 8pt; color: #0000ff;">' + latAlt + '</span><span style="line-height: 7pt; font-size: 7pt;">&nbsp;&nbsp;&nbsp;(' + lat + ')<span style="line-height: 4pt; font-size: 4pt; font-weight: 500;"><br><br></span><span style="line-height: 7pt; font-size: 7pt; font-weight: 500;"><a href="javascript:openBrWindow(\'locationDetail_popup.htm?cache=2\',\'geo_feedback_popup\',\'scrollbars=yes, menubar=no, location=no, resizable=no, height=550,width=500\');">' + cachetype 							+ '</a> | </span><span style="line-height: 7pt; font-size: 7pt; font-weight: 500;">' + difficulty + ' | <span style="line-height: 7pt; font-size: 7pt; font-weight: 500;"><a href="http://maps.google.com/maps?q=' + lat + ',' + lng + '(Cache1)&iwloc=A&hl=en" target="_blank">Directions</a> | </span><span style="line-height: 7pt; font-size: 7pt;">' + dateplaced + ' | <span style="line-height: 7pt; font-size: 7pt; font-weight: 500;"><a href="javascript:openBrWindow(\'feedback_geo_popup.htm?cache=2\',\'geo_feedback_popup\',\'scrollbars=no, menubar=no, location=no, resizable=no, height=700,width=400\');">Comment</a> ' + '</span></nobr>'

						// create the marker
					        var point = new GLatLng(lat,lng);
						var marker = createMarker(point,label,html);
						map.addOverlay(marker);


					}	// end - if ((lat < maxLat) && (lat > minLat) && (lng < maxLng) && (lng > minLng))	

			//	 } //  end - if (cacheId == detailId)

	          	} // end - for ...

//        	}  // end - if(request.readyState == 4) ...

//	} // end - request.onreadystatechange = function ()

//	request.send(null);

}	// end function getMarkersToDisplay()




function createMarker(point,name,html) {

	var marker = new GMarker(point);

        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });

        return marker;

}