﻿	function onLoad() {

		//create the map & controls

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

		map.addControl(new GLargeMapControl());

		map.addControl(new GMapTypeControl());

		// map.centerAndZoom(new GPoint(-111.765429, 33.414773), 3);
		map.centerAndZoom(new GPoint(-111.926239, 33.485629), 3);
/* q=3220+N.+Scottsdale+Road+85251&sll=33.485629,-111.926239&sspn=0.372811,0.891953&ie=UTF8&hq=&hnear=3220+N+Scottsdale+Rd,+Scottsdale,+Maricopa,+Arizona+85251&z=16&iwloc=A		 
*/
		// Download the data in data.xml and load it on the map. The format we

		var request = GXmlHttp.create();

		request.open("GET", "http://www.pitstopwheels.com/!map/data.xml", true);

		request.onreadystatechange = function() {

			if (request.readyState == 4) {

				var xmlDoc = request.responseXML;

				var markers = xmlDoc.documentElement.getElementsByTagName("marker");

				

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

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

					var Lat = parseFloat(markers[i].getAttribute("lat"));

					var Lng = parseFloat(markers[i].getAttribute("lng"));

					var point = new GPoint(Lng, Lat);

					

					// Show the following HTML in the info window when it is clicked

					var html = markers[i].getAttribute("name")+'<br>'+

								markers[i].getAttribute("add1")+'<br>'+

								markers[i].getAttribute("add2")+'<br>'+

								markers[i].getAttribute("event")+'<br>';

					//dest is just a way to combine lines 1 & 2 of the address so they can be sent to maps.google.com					

					var dest = markers[i].getAttribute("add1") + ',' + markers[i].getAttribute("add2");

					//dirLink is the "get directions to here' link. It uses the 'dest' var and contains a form.

					var dirLink = '<form action="http://maps.google.com/maps" method="get"><label for="saddr"><b>Type your address below:</b></label><br><input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br><INPUT ID="SUBMIT" TYPE="SUBMIT" VALUE="Get directions to here."><input type="hidden" name="daddr" value="'+dest+'" /><input type="hidden" name="hl" value="en" /></form>';

					//info is just a combination of all the other information that is put together to be displayed in the popup

					var info = html + dirLink;

					if (tourney == 1){

						imageurl = "http://www.pitstopwheels.com/!map/black.png";

					} else {

						imageurl = "http://www.pitstopwheels.com/!map/yellow.png";

					}										

					// Creates a marker whose info window displays the given number

						var marker = createMarker(point, info);

						map.addOverlay(marker);

					

					

				}				

			}

		}

		request.send(null);

    }
	


	// This is the code I used so I could have custom markers. If you want to use default markers

	function createMarker(point, html) {

		var icon = new GIcon();

					icon.image = imageurl; 

					icon.shadow = "http://www.pitstopwheels.com/!map/shadow.png";  

					icon.iconSize = new GSize(40, 50);

					icon.shadowSize = new GSize(45, 55);

					icon.iconAnchor = new GPoint(0, 63);    

					icon.infoWindowAnchor = new GPoint(25, 50);

		// var marker = new GMarker(point, icon);
		
		var marker = new GMarker(point);



		//this is the listener that tells when someone clicks on a marker

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

			marker.openInfoWindowHtml(html);

		});



		return marker;

	}
	