var map;
	var bounds; 
	var southWest;
    var northEast;
    var lngSpan;
    var latSpan;
	var initialLatitude = 51.5177162373547;
	var initialLongitude = -0.1050567626953125;
	var startZoomLevel = 3;
	var retreiveInterval = 5000;
	var ServletUrl = "http://web2.favy.com/server"
	// instantiate the json request 
	var jsonRequest = new Request.JSON({
		autoCancel: true,
		url: ServletUrl, 
		onSuccess: function(rep){
			var point = new GLatLng(rep.latitude, rep.longitude);
			var html = "<center>";
			html = html + "<span class = 'txt1'>favy</span>";
			html = html + "<span class = 'ast'>*</span>";
			html = html + "<span class = 'txt2'> matched</span>";
			html = html + "</center>";
			html = html + "<center>";
			html = html + "<span class = 'txt3'>user </span>";
			html = html + "<span class = 'txt4'>"+ rep.userName+ "</span>";
			html = html + "<span class = 'txt3'> with</span>";
			html = html + "</center>";
			html = html + "<center>";
			html = html + "<img src='"+rep.thumbUrl+"'width=111 height=82 />";
			html = html + "</center>";
			html = html + "<center>";
			html = html + "<a href ="+rep.recommendationUrl+" TARGET=\"_blank\""+">"+rep.title+"</a>";
			html = html + "</center>";
			map.openInfoWindowHtml(point, html);
		}
	});
		
	// wrap the call to the json request get method in a function in order to use periodical
	function getNewPlaceMark() {
		jsonRequest.get();
	}
	// show the map
	function loadmap() {
      if (GBrowserIsCompatible()) {
          map = new GMap2(document.getElementById("map"),{backgroundColor: "#FFFFFF"});
          map.setCenter(new GLatLng(initialLatitude,initialLongitude ), startZoomLevel);
		  map.setMapType(G_PHYSICAL_MAP);
		  bounds  = map.getBounds();
          southWest = bounds.getSouthWest();
          northEast = bounds.getNorthEast();
          lngSpan = northEast.lng() - southWest.lng();
          latSpan = northEast.lat() - southWest.lat();
		  getNewPlaceMark.periodical(retreiveInterval);
		}
    }