if (GBrowserIsCompatible()) {
	
	 
	
	// this variable will collect the html which will eventually be placed in the side_bar
	var side_bar_html = "";

	// arrays to hold copies of the markers and html used by the side_bar
	// because the function closure trick doesnt work there
	var gmarkers = [];
	var i = 0;

	// Create Regional Marker
	var icon = new GIcon();
		icon.image = "gfx/map-icon.png";
	icon.iconSize = new GSize(136, 131);
icon.shadowSize = new GSize(136, 131);
icon.iconAnchor = new GPoint(0, 136);
icon.infoWindowAnchor = new GPoint(0, 136);
		
	// Create Casulty Icon
	var icon2 = new GIcon();
		icon2.image = "gfx/map-icon.png";
		icon2.shadow = "images/casulty-shadow.png";
		icon2.iconSize = new GSize(136, 131);
		icon2.shadowSize = new GSize(136, 131);
		icon2.iconAnchor = new GPoint(0, 136);
		icon2.infoWindowAnchor = new GPoint(0, 136);

	// A function to create the REGIONAL marker and set up the event window
	function createMarker(point,name,html) {
		var marker = new GMarker(point,icon);
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(html);
		});
		// save the info we need to use later for the side_bar
		gmarkers[i] = marker;
		i++;
		return marker;
	}
	
	
	
	
		// Create Casulty Icon
	var icon2 = new GIcon();
		icon2.image = "gfx/school-icon.png";
		icon2.shadow = "images/casulty-shadow.png";
		icon2.iconSize = new GSize(136, 131);
		icon2.shadowSize = new GSize(136, 131);
		icon2.iconAnchor = new GPoint(0, 136);
		icon2.infoWindowAnchor = new GPoint(0, 136);

		
	// A function to create the CASULTY marker and set up the event window
	function createMarker2(point,name,html) {
		var marker2 = new GMarker(point,icon2);
		GEvent.addListener(marker2, "click", function() {
			marker2.openInfoWindowHtml(html);
		});
		// save the info we need to use later for the side_bar
		gmarkers[i] = marker2;
		i++;
		return marker2;
	}
	
	
	
	
		// Create Casulty Icon
	var icon3 = new GIcon();
		icon3.image = "gfx/beach-icon.png";
		icon3.shadow = "images/casulty-shadow.png";
		icon3.iconSize = new GSize(136, 131);
		icon3.shadowSize = new GSize(136, 131);
		icon3.iconAnchor = new GPoint(136, 131);
		icon3.infoWindowAnchor = new GPoint(136, 131);

		
	// A function to create the CASULTY marker and set up the event window
	function createMarker3(point,name,html) {
		var marker3 = new GMarker(point,icon3);
		GEvent.addListener(marker3, "click", function() {
			marker3.openInfoWindowHtml(html);
		});
		// save the info we need to use later for the side_bar
		gmarkers[i] = marker3;
		i++;
		return marker3;
	}

	// This function picks up the click and opens the corresponding info window
	function myclick(i) {
		GEvent.trigger(gmarkers[i], "");
	}

	// This function zooms in or out
	// its not necessary to check for out of range zoom numbers, because the API checks
	function myzoom(a) {
		map.setZoom(map.getZoom() + a);
	}

	// create the map
	var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-4.916363,50.574088), 0); 
map.setMapType((G_SATELLITE_MAP));


// add the points    
	var point = new GLatLng(50.573388,-4.917063);
	var marker = createMarker(point,"Aberdeen","<div class='regionallogo'>Surfs Up Shop</div>");
	map.addOverlay(marker);

	
	var point = new GLatLng(50.573240,-4.915933);
	var marker2 = createMarker2(point,"Singapore","<div class='casultylogo'><span class='casultytitle'>Surfs Up Surf School</span></div>")
	map.addOverlay(marker2);

var point = new GLatLng(50.573588,-4.917063);
	var marker3 = createMarker3(point,"Singapore","<div class='casultylogo'><span class='casultytitle'>Beach House</span></div>")
	map.addOverlay(marker3);


	// ====== Restricting the range of Zoom Levels =====
	// Get the list of map types      
	var mt = map.getMapTypes();
	// Overwrite the getMinimumResolution() and getMaximumResolution() methods
	for (var i=0; i<mt.length; i++) {
		mt[i].getMinimumResolution = function() {return 2;}
		mt[i].getMaximumResolution = function() {return 18;}
	}
	

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