if (GBrowserIsCompatible()) {
	var map = new GMap2(document.getElementById("map"));
	map.enableScrollWheelZoom();
	map.setMapType(eval(mapType));

	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	
	
	// ==== It is necessary to make a setCenter call of some description before adding markers ====
	// ==== At this point we dont know the real values ====
	map.setCenter(new GLatLng(0, 0), 0);
	
	var gmarkers = [];
	var htmls = [];
	var i = 0;
	
	function myclick(i){
		gmarkers[i].openInfoWindowHtml(htmls[i]);
	}
	
	var userIcon = new GIcon();
	userIcon.image = iconPath + "/user_24.png";
	userIcon.shadow = iconPath + "/user_24_s.png";
	userIcon.iconSize = new GSize(24, 24);
	userIcon.shadowSize = new GSize(37, 24);
	userIcon.iconAnchor = new GPoint(12, 12);
	userIcon.infoWindowAnchor = new GPoint(12, 12);
	
	
	function createMarker(point, html){
		var marker = new GMarker(point, userIcon);
		GEvent.addListener(marker, "click", function(){
			marker.openInfoWindowHtml(html);
		});
		gmarkers[i] = marker;
		htmls[i] = html;
		i++;
		return marker;
	}
  
  var setupFunction = function() {
	
	// ===== Start with an empty GLatLngBounds object =====     
	var bounds = new GLatLngBounds();
	
	// Read the data from example.xml
	var request = GXmlHttp.create();
	request.open("GET", pathPrefix + "/DirectCall/gmpUsersCache" + sid1, true);
	
	request.onreadystatechange = function(){
		if (request.readyState == 4) {
		
			var xmlDoc = GXml.parse(request.responseText);
			
			// obtain the array of markers and loop through it
			var markerArray = [];
			var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			
			for (var i = 0; i < markers.length; i++) {
				// obtain the attribues of each marker
				
				var lat = parseFloat(markers[i].getAttribute("coordinateY"));
				var lng = parseFloat(markers[i].getAttribute("coordinateX"));
				var point = new GLatLng(lat, lng);
				var html = markers[i].getAttribute("html");
				var userlink = markers[i].getAttribute("userlink");
				// create the marker
				var marker = createMarker(point, html);
				
				markerArray.push(marker);
				bounds.extend(point);
			}
			
			var zoom = map.getBoundsZoomLevel(bounds);
			
			if (map.getBoundsZoomLevel(bounds) > 8) {
				zoom = 6;
			}
			
			map.setZoom(zoom);
			map.setCenter(bounds.getCenter());
			
			var style = [{
				url: iconPath + '/group_24.png',
				height: 24,
				width: 24,
				opt_anchor: [0, 0],
				opt_textColor: '#FF0000'
			}, {
				url: iconPath + '/group_32.png',
				height: 32,
				width: 32,
				opt_anchor: [0, 0],
				opt_textColor: '#FF0000'
			}, {
				url: iconPath + '/user_fotoforum_24.png',
				height: 48,
				width: 48,
				opt_anchor: [0, 0],
				opt_textColor: '#FF0000'
			}];
			var markerCluster = new MarkerClusterer(map, markerArray, {styles: style});
			
			
		}
	}
	request.send(null);
  
  }
  
  $(document).ready(setupFunction);
  
  $("#map").parents("div.box.hasTabs").find("li.tab:eq(" + $("#map").parent().prevAll("div.boxTab").length + ")").click(setupFunction);
  
}
// display a warning if the browser was not compatible
else {
	alert("Sorry, the Google Maps API is not compatible with this browser");
}