// Make the markers
var cicon = new GIcon();
cicon.image             = "../images/maps/map-userMarker.png";
cicon.shadow            = "../images/maps/map-shadow.png";
cicon.iconSize          = new GSize(18, 21);
cicon.shadowSize        = new GSize(25, 22);
cicon.iconAnchor        = new GPoint(6, 20);
cicon.infoWindowAnchor  = new GPoint(8, 5);

var icons = [];
icons[0] = cicon;

function createMarker(point,name,html,icontype) {
	var marker = new GMarker(point,icons[icontype]);
	GEvent.addListener(marker, "click", function() {
	  marker.openInfoWindowHtml(html);
	});
	return marker;
}

// Make the Map
function makeMap() {
	
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(40, -40), 2);
	}

// Read the data from the .xml
	var request = GXmlHttp.create();
	request.open("GET", "../../maps/users.xml", true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var xmlDoc = request.responseXML;

// obtain the array of markers and loop through it
			var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			var bounds = new GLatLngBounds();			
			for (var i = 0; i < markers.length; i++) {

// obtain the attribues of each marker
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var point = new GLatLng(lat,lng);
				var html = markers[i].getAttribute("html");
				var label = markers[i].getAttribute("label");
				var icontype = parseInt(markers[i].getAttribute("level"));

// create the markers
				var marker = createMarker(point,label,html,icontype);
				map.addOverlay(marker);
				bounds.extend(point);
			}
			map.setZoom(map.getBoundsZoomLevel(bounds));
			map.setCenter(bounds.getCenter());
			map.addControl(new GSmallMapControl());
			
		}
	}
	request.send(null);
	
}