// When the page loads
function load() {
	
	// Set the variable "map" to all elements that have the ID of Map in the HTML file.
	var map = document.getElementById("map");
	// If we are using a compatible browser
	if ( GBrowserIsCompatible() ) {
		// Create a new gmap variable that is an instance of GMap2
		var gmap = new GMap2(map);
		// Add the Map Control Object
		gmap.addControl( new GLargeMapControl() );
		// Add the Type of Map (Satellite, Hybrid etc)
		gmap.addControl( new GMapTypeControl() );
		// Add the small map overview map at the bottom left of screeen
		gmap.addControl( new GOverviewMapControl( new GSize(100,100) ) );
		// Set the view area to the centre of the screen
		gmap.setCenter( new GLatLng(51.416932,-0.060658),13 );
		//Enable Zooming
		gmap.enableDoubleClickZoom()
		// Format the Popup Windows
		function formatWindow(input) {
			// Start to build the variable that creates the bubbles
			var html = "<div class=\"bubble\">";
			html += "<h1>" + input.company + "</h1>";
			html += "<p>" + input.information + "</p>";
			// html += "<p><a href=\"" + input.website + "\">Visit Website</a></p>";
			html += "</div>";
			// Return the whole html variable
			return html;
		}
		
		// Create a marker
		function createMarker(input) {
			// Create a marker at the reference mentioned in points.json
			var marker = new GMarker(input.point);
			// Add the event listener for clicks on the pins
			GEvent.addListener(marker,"click",function() {
				// On click open the info window specified in the above formatWindow(input) function
				marker.openInfoWindowHtml( formatWindow(input) );
			});
			
			// Return the marker onto the map
			return marker;
		
		}

		// Parse the JSON file to get the markers
		function parseJson (doc) {
			// Evaluate the jsonData
			var jsonData = eval("(" + doc + ")");
			// As long as there is data to parse
			for (var i=0; i<jsonData.markers.length; i++) {
				// Create a marker
				var marker = createMarker(jsonData.markers[i]);
				// And add the marker
				gmap.addOverlay(marker);
			}
		}
		// Downloads the JOSON file
		GDownloadUrl("points.json", function(data, responseCode) {
			// And passes the data onto the parseJson(data) function
			parseJson(data);
		});
		
		// Or if the browser isn't compatible
		} else {
			// Display an alert message
			alert("Sorry, your browser cannot handle the true power of Google Maps");
	}
}

// When the window loads start the load function above.
window.onload = load;
// When the window unloads unload using the Google Maps Unload function.
window.onunload = GUnload;