var map;
function load() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
    var center = new GLatLng(52.072462, 5.120627);
    map.setCenter(center, 13);
		var blueIcon = new GIcon();
		
		//blueIcon.image = "/gfx/icon.gif";
		blueIcon.iconSize = new GSize(32, 40);
		blueIcon.iconAnchor = new GPoint(16, 20);
		blueIcon.infoWindowAnchor = new GPoint(0, 0);
		markerOptions = { icon:blueIcon };
		
		// Set up our GMarkerOptions object
		// Create a lettered icon for this point using our icon class
		for(i = 0 ; i < info.length ; i++) {
			blueIcon.image = info[i][5];
			var point = new GLatLng(info[i][0], info[i][1]);
			map.addOverlay(createMarker(point, info[i][2], i));
		}
		
		//var marker = new GMarker(center, {draggable: true});
		//
		//GEvent.addListener(marker, "dragstart", function() {
		//	map.closeInfoWindow();
		//});
		//
		//GEvent.addListener(marker, "dragend", function() {
		//	txt = this.getLatLng();
		//	marker.openInfoWindowHtml("Positie: " + txt);
		//});
		//map.addOverlay(marker);
  }
	function createMarker(point, msg, num) {
	  var marker = new GMarker(point, markerOptions);
	  //var marker = new GMarker(point);
	  
	  //marker.value = number;
	  GEvent.addListener(marker, "click", function() {
	    var myHtml = msg;
	    map.openInfoWindowHtml(point, myHtml);
	    
	    document.getElementById("title").innerHTML = info[num][3];
		document.getElementById("info").innerHTML = info[num][4];
	    
	  });
	  return marker;
	}
}
function showInfo(num) {
	
	
}