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;">'+gmarkers[i].my_html+'<\/div>');
			self.location.href = "#top";
		}

		// create the map
		var map = new GMap(document.getElementById("map"));
			
		//small map control
		//map.addControl(new GSmallMapControl());
			
		// large map control
		map.addControl(new GLargeMapControl());
		//map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(48.4146186174932,-89.24263000488281),12);
			
			        
		// Create our "tiny" marker icon
		var icon = new GIcon();
		icon.image = "marker_blue.png";
		icon.shadow = "shadow.png";
		icon.iconSize = new GSize(12, 20);
		icon.shadowSize = new GSize(22, 20);
		icon.iconAnchor = new GPoint(6, 20);
		icon.infoWindowAnchor = new GPoint(5, 1);
			
			
		// array to hold copies of the markers 
		// we cant scan map.overlays[] because the order of the entries changes
		var gmarkers = [];
			
		// functions that open the directions forms
		
		function tohere(i) {
			gmarkers[i].openInfoWindowHtml('<div style="white-space:nowrap;">'+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", "data.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(parseFloat(markers[i].getAttribute("lng")),parseFloat(markers[i].getAttribute("lat")));            
					var html = xmlDoc.getElementsByTagName('html')[i].firstChild.data;          
					var city = xmlDoc.getElementsByTagName('city')[i].firstChild.data;   
					var province = xmlDoc.getElementsByTagName('province')[i].firstChild.data; 
					var phone = xmlDoc.getElementsByTagName('phone')[i].firstChild.data; 
					if (phone != "-"){
						phone = "Ph: " + phone;
					} else {
						phone = "";
					}
					var label = xmlDoc.getElementsByTagName('name')[i].firstChild.data; 
			        
					// create the marker
					var marker = new GMarker(point, icon);
					// Build the extra html that handles the directions links and forms
					//     The inactive version of the direction info
					marker.my_html = '<br\/><b>' + label + '<\/b><br \/>' + html + '<br \/>' + city +', ' + province + '<br \/> ' + phone + '<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 =  '<br\/><b>' + label + '<\/b><br \/>' + html + '<br \/><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="40" maxlength="40" name="saddr" id="saddr" value="" /><br \/>' +
						'<input class="button" value="Get Directions" type="submit">' +
						'<input type="hidden" name="daddr" value="' +
						point.y + ',' + point.x + "(" + label + ")" + '"\/>';
						
					//     The version with the "to here" form open
					marker.from_html = '<br\/><b>' + label + '<\/b><br \/>' + html + '<br \/><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="40" maxlength="40" name="daddr" id="daddr" value="" \/><br \/>' +
						'<input class="button" value="Get Directions" type="submit" \/>' +
						'<input type="hidden" name="saddr" value="' +
						point.y + ',' + point.x + "(" + label + ")" + '"\/>';
					marker.my_name = label;
					map.addOverlay(marker);
					gmarkers.push(marker);
				}
				}
			}
			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");
	}