// JavaScript Document

<!-- Key below is unique to www.rwoinsurance.com -->



		//<![CDATA[

		

			function load() {

				if (GBrowserIsCompatible()) {

				

					/* create the map using Google Maps API v2 (at last!) */

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

					/* only add a small control to the map */

					map.addControl(new GSmallMapControl());

					

					/* add the 'map', 'satellite', and hybrid controls to the map */

					map.addControl(new GMapTypeControl());

					

					/* centre to any value in order to initialise the map - 

					this will be modified when loading the input XML */

					/*map.setCenter(new GLatLng(38.290625, -76.491908), 5);*/

					map.setCenter(new GLatLng(38.29809, -76.50690), 7); 

					

					/* function to create a marker to add to the map, 

					enabling the marker info to be displayed when clicked 

					and a tooltip to be display when hovered-over */

					function createMarker(point, name, htmlNode) {

						var marker = new GMarker(point, {title:name});

						GEvent.addListener(marker, "click", function() {

							marker.openInfoWindow(htmlNode);

						});

						return marker;

					} 

					

					/* function to generate the html used for the 'get directions' form using the DOM */

					function createHTMLNode(name, address, friendlyName, point) { 

						// prepare the root node

						var root = document.createElement("div");

						root.setAttribute("style", "font-family: arial, helvetica, sans-serif; width: 350px");

						

						// link title node

						var link = document.createElement("a");

						link.setAttribute("href", "http://www.rwoinsurance.com/ContactUs/");

						

						// title node

						var title = document.createElement("strong");

						title.innerHTML = name;

						link.appendChild(title);

						root.appendChild(link);

						

						// zoom node

						var zoomLink = document.createElement("a");

						zoomLink.setAttribute("href", "#");

						zoomLink.setAttribute("onclick", "javascript:map.setCenter(point, 15)"); // TODO: this is currently failing when its equivalent worked fine in v1

						zoomLink.setAttribute("title", "Zoom to "+name);

						

						// zoom image

						var zoomImage = document.createElement("img");

						zoomImage.setAttribute("src", "/images/mag-glass.png");

						zoomImage.setAttribute("width", "11");

						zoomImage.setAttribute("height", "12");

						zoomImage.setAttribute("alt", "Magnifying Glass");

						zoomImage.style.marginLeft = "5px";

						zoomImage.style.border = "0px";

						zoomLink.appendChild(zoomImage);

						//root.appendChild(zoomLink);

						

						// line break

						var break1 = document.createElement("br");

						root.appendChild(break1);

						

						// address

						var addr = document.createElement("span");

						addr.innerHTML = address;

						root.appendChild(addr);

						

						// line break

						var break2 = document.createElement("br");

						root.appendChild(break2);

						

						// directions form

						var form = document.createElement("form");

						form.setAttribute("action", "http://maps.google.com/maps");

						form.setAttribute("method", "get");

						form.setAttribute("target", "_blank");

						form.style.marginTop = "5px"

						form.style.marginBottom = "0px";

						form.style.fontSize = "1.0em";

						form.textAlign = "left";

						

						// textbox label

						var label = document.createElement("label");

						label.setAttribute("for", friendlyName+"Box");

						label.innerHTML = "Get Directions From: ";

						form.appendChild(label);

						

						// directions (start) input

						var dirInput = document.createElement("input");

						dirInput.setAttribute("type", "text");

						dirInput.setAttribute("name", "saddr");

						dirInput.setAttribute("id", friendlyName+"Box");

						dirInput.setAttribute("value", "");

						dirInput.style.width = "100px";

						dirInput.setAttribute("size", "20");

						form.appendChild(dirInput);

						

						// (hidden) destination input

						var postcodeInput = document.createElement("input");

						postcodeInput.setAttribute("type", "hidden");

						postcodeInput.setAttribute("name", "daddr");

						//postcodeInput.setAttribute("value", point.lat() + "," + point.lng());

						postcodeInput.setAttribute("value", address);

						form.appendChild(postcodeInput);

						

						// (hidden) language input

						var langInput = document.createElement("input");

						langInput.setAttribute("type", "hidden");

						langInput.setAttribute("name", "h1");

						langInput.setAttribute("value", "en");

						form.appendChild(langInput);

						

						// submit button

						var button = document.createElement("input");

						button.setAttribute("type", "submit");

						button.setAttribute("value", "Go! ");

						dirInput.style.fontSize = "0.8em";

						form.appendChild(button);

						

						root.appendChild(form);

						return root;

					}

					

					/* use the Google Maps asynchronous XML reader function 

					to get the office data from the xml file */

					GDownloadUrl("offices.xml", function(data, responseCode) {

						var xml = GXml.parse(data);

						var markers = xml.documentElement.getElementsByTagName("office");

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

							/* get the (v2) GLatLng object (rather than the v1 GPoint) representing the current marker from the XML */

							var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("long")));

							

							/* get the remaining elements needed to build the html from the xml */

							/* I haven't quite worked out why IE/Firefox do not handle the node value in the same way */

							var name = markers[i].getElementsByTagName("name")[0].text;

							if (name == null) {

								name = markers[i].getElementsByTagName("name")[0].textContent;

							}

							var address = markers[i].getElementsByTagName("address")[0].text;

							if (address == null) {

								address = markers[i].getElementsByTagName("address")[0].textContent;

							}

							var friendlyName = markers[i].getElementsByTagName("friendlyName")[0].text;

							if (friendlyName == null) {

								friendlyName = markers[i].getElementsByTagName("friendlyName")[0].textContent;

							}

							

							/* get the html node */

							var html = createHTMLNode(name, address, friendlyName, point);

							

							/* add the marker with the html to the map as an overlay */

							map.addOverlay(createMarker(point, name, html));



							/* set the zoom level and center to the correct point, as requested in the query string */					

							var match = "Annapolis";

							if ((markers[i].getElementsByTagName("friendlyName")[0].textContent == match) || (markers[i].getElementsByTagName("friendlyName")[0].text == match)) {

								map.setCenter(point, 8);

							}

						}

					});

					

				} else {

					alert("Your browser is not compatible with Google Maps 2.0");

				}

			}

		//]]>

<!-- End Google Maps script -->