function loadMap() {
	if (GBrowserIsCompatible()) {
		
		var foursqUser = "http://foursquare.com/user/-";
		var foursqVenue = "http://foursquare.com/venue/";
	
		$('#btn-whatisthis').toggle(function() {
	  		$('#overlay').fadeTo('fast', 0.8, function() {});
		}, function() {
	    	$('#overlay').fadeTo('fast', 0, function() {
        		$('#overlay').hide();
        	});
		});
	
		$('#btn-reset').click(function() {
			map.setCenter( bounds.getCenter( ), map.getBoundsZoomLevel( bounds ) );
		});
		$('#btnclose').click(function() {
			$('#overlay').hide();
		});
	
		// create map
		var map = new GMap2(document.getElementById("map"));
		var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true };

		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		// set the center of Edinburgh
		var edinburgh = new GLatLng(55.9485572,-3.2096673);
		map.setCenter(edinburgh, 12);
		
		mgr = new GMarkerManager(map);
		
		// set up arrays
		var placesArr=new Array;
		var bounds = new GLatLngBounds();
		var batch=[];
		
		// setter for place
		function place(_title, _venueid, _address, _city, _postcode, _phone, _icon, _checkins, _herenow, _mayorid, _mayor, _mayorphoto, _lat, _lng, _tips, _specials) {
			this.title = _title;
			this.venueid = _venueid;
			this.address = _address;
			this.city = _city;
			this.postcode = _postcode;
			this.phone = _phone;
			this.icon = _icon;
			this.checkins = _checkins;
			this.herenow = _herenow;
			this.mayorid = _mayorid;
			this.mayor = _mayor;
			this.mayorphoto = _mayorphoto;
			this.lat = _lat;
			this.lng = _lng;	
			this.tips = _tips;
			this.specials = _specials; 
		}
		// setter for tip
		function tip(_text, _user, _photo, _id) {
			this.text = _text;
			this.user = _user;
			this.photo = _photo;
			this.id = _id;
		}
		// set for special
		function special(_kind, _message, _venue) {
			this.kind = _kind;
			this.message = _message;
			this.venue = _venue;
		}
		
		// get places points
		$.get("http://time.thetouchagency.co.uk/dema/includes/themes/dema/dema.xml?cache="+new Date().getTime(),
		function(xml){
			var count=0;
			// look through xml items to get each place
			$('place', xml).each( function() {
				
				var tipsArr=new Array;
				var specialsArr=new Array;
				
				var getTips = $(this).find("tips").children();
				var getSpecials = $(this).find("specials").children();
				
				var placesLen=placesArr.length;
				
				$(getTips).each(function() {
					tipsArr[tipsArr.length] = new tip($(this).find('text').eq(0).text(), $(this).find('user').eq(0).text(), $(this).find('photo').eq(0).text(), $(this).find('id').eq(0).text());
				});
				
				$(getSpecials).each(function() {
					specialsArr[specialsArr.length] = new special($(this).find('kind').eq(0).text(), $(this).find('message').eq(0).text(), $(this).find('venue').eq(0).text());
				});
				
				// create object and add to array
				placesArr[placesLen] = new place($(this).find('title').eq(0).text(), $(this).find('venueid').eq(0).text(), $(this).find('address').eq(0).text(), $(this).find('city').eq(0).text(), $(this).find('postcode').eq(0).text(), $(this).find('phone').eq(0).text(), $(this).find('icon').eq(0).text(), $(this).find('checkins').eq(0).text(), $(this).find('herenow').eq(0).text(), $(this).find('mayorid').eq(0).text(), $(this).find('mayor').eq(0).text(), $(this).find('mayorphoto').eq(0).text(), $(this).find('lat').eq(0).text(), $(this).find('lng').eq(0).text(), tipsArr, specialsArr);	
				
				// add marker
				var point = new GLatLng(placesArr[placesLen].lat,placesArr[placesLen].lng);
				var marker = createMarker(point, count);
				
				bounds.extend(marker.getPoint());
				batch.push(marker);
				count++;
			});
			map.setCenter( bounds.getCenter( ), map.getBoundsZoomLevel( bounds ) );
			mgr.addMarkers(batch,10);
			mgr.refresh();
			
		});
		
		// Create a base icon for all of our markers that specifies the
		// shadow, icon dimensions, etc.
		var baseIcon = new GIcon(G_DEFAULT_ICON);
		baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
		baseIcon.iconSize = new GSize(20, 34);
		baseIcon.shadowSize = new GSize(37, 34);
		baseIcon.iconAnchor = new GPoint(9, 34);
		baseIcon.infoWindowAnchor = new GPoint(9, 2);
		
		// Creates a marker whose info window displays the letter corresponding
		// to the given index.
		function createMarker(point, index) {
			var icon = new GIcon(baseIcon);
			
			// Set up our GMarkerOptions object
			markerOptions = { icon:icon };
			
			var marker = new GMarker(point, markerOptions);
			
			GEvent.addListener(marker, "click", function() {
				// load venue data
				// create details tab
				var details = "<div class=\'venuedetails\'><div class=\'place\'><p><a href=\'"+foursqVenue+placesArr[index].venueid+"\' title=\'View venue\' target=\'_blank\'><span class=\'placetitle\'>"+placesArr[index].title+"</span></a>";
				
				if (placesArr[index].address.length!=0) {
					details+=",<br />"+placesArr[index].address;
				}
				if (placesArr[index].city.length!=0) {
					details+=",<br />"+placesArr[index].city;
				}
				if (placesArr[index].postcode.length!=0) {
					details+=",<br />"+placesArr[index].postcode;
				}
				details+="</p>";				
				
				details+="</div><div class=\'icons\'><div class=\'icon\'><img src=\'"+placesArr[index].icon+"\' /></div></div><div class=\'clear\'></div><div class=\'vdetails\'>";
				
				
				if (placesArr[index].checkins.length!=0) {
					details+="<div class=\'checkins\'><span class=\'checkinstitle\'>Number of checkins:</span> "+placesArr[index].checkins+"</div>";
				}
				if (placesArr[index].herenow.length!=0) {
					details+="<div class=\'herenow\'><span class=\'herenowtitle\'>Here now:</span> "+placesArr[index].herenow+"</div>";
				}
				if (placesArr[index].mayor.length!=0) {
					details+="<div class=\'mayor\'><span class=\'mayortitle\'>Current Mayor:</span> <a href=\'"+foursqUser+placesArr[index].mayorid+"\' title=\'View profile\' target=\'_blank\'>"+placesArr[index].mayor+"</a></div>";
				}
				if (placesArr[index].mayorphoto.length!=0) {
					details+="</div><div class=\'icons\'><div class=\'mayorphoto\'><a href=\'"+foursqUser+placesArr[index].mayorid+"\' title=\'View profile\' target=\'_blank\'><img src=\'"+placesArr[index].mayorphoto+"\' width=\'50\' height=\'50\' /></a></div></div><div class=\'clear\'></div></div>";
				} else {
					details+="</div><div class=\'clear\'></div></div>";
				}
				
				
				var tips="";
				var specials="";
				
				// get all tips
				for (var x=0;x<placesArr[index].tips.length;x++) {
					tips+="<div class=\'tip\'><div class=\'tip-icon\'><a href=\'"+foursqUser+placesArr[index].tips[x].id+"\' title=\'View profile\' target=\'_blank\'><img src=\'"+placesArr[index].tips[x].photo+"\' width=\'75\' height=\'75\' alt=\'"+placesArr[index].tips[x].user+"\' /></a></div><div class=\'tip-text\'>"+placesArr[index].tips[x].text+" <span class=\'tip-user\'>by <a href=\'"+foursqUser+placesArr[index].tips[x].id+"\' title=\'View profile\' target=\'_blank\'>"+placesArr[index].tips[x].user+"</a></span></div><div class=\'clear\'></div></div>";
				}
				
				tips="<div class=\'tips\'><p>Below are tips/comments left by other foursquare users:</p>"+tips+"</div>";
				
				// get all specials
				for (var x=0;x<placesArr[index].specials.length;x++) {
					specials+="<div class=\'specials\'><p>"+placesArr[index].specials[x].message+" at "+placesArr[index].specials[x].venue+"</p>Location: <span class=\'special-location\'>"+placesArr[index].specials[x].kind+"</span></div>";
				}
				
				var tabs = [];
				// Create tabs and add them to the array  
				tabs.push(new GInfoWindowTab('Details', details));  
				if (placesArr[index].tips.length!=0) {
					tabs.push(new GInfoWindowTab('Tips', tips));  
				}
				if (placesArr[index].specials.length!=0) {
					tabs.push(new GInfoWindowTab('Offers', specials));  
				}
				// Add tabs to the InfowWindow  
				marker.openInfoWindowTabsHtml(tabs,{maxWidth:400});  
				

			});
			return marker;
		
		}
	}
}