var map, cluster;
var html;
var adres;
var plaats;
var prijs;
var youtube_url;
var makelaar;
var www;
var makelaarid;
var label;

function myOnLoad() {
	if (GBrowserIsCompatible()) {
		map=new GMap2(document.getElementById('map'));
		map.setCenter(new GLatLng(0, 0), 0, G_NORMAL_MAP);
		map.setUIToDefault();
		//map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7)));
		//map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 28)));
		
		var marker, markersArray=[], normalIcon=new GIcon();
		
		/*	json data already loaded from marker_data_01.php by using
			<script type="text/javascript" src="marker_data_01.php"></script>
			on simple.php page
		*/
		
		normalIcon.image='http://www.onlinebezichtigen.nl/googlemaps/icoontje_groen.png';
		normalIcon.iconSize=new GSize(24, 24);
		normalIcon.iconAnchor=new GPoint(0, 24);
		normalIcon.infoWindowAnchor=new GPoint(5, 1);
		
		
		for (var i=0; i<json.length; i++) {
			
			marker=newMarker(new GLatLng(json[i].lat, json[i].lng), json[i].html, json[i].adres, json[i].plaats, json[i].prijs, json[i].youtube_url, json[i].makelaar, json[i].www, json[i].makelaarid, json[i].label, normalIcon);
			markersArray.push(marker);
		}
		
		cluster=new ClusterMarker(map, { markers:markersArray } );
		cluster.fitMapToMarkers();
		
		map.savePosition();	//	enables the large map control centre button to return the map to initial view
		
		//	add an HtmlControl to enable toggling of the ClusterMarker cluster function
		//	see http://googlemapsapi.martinpearman.co.uk/htmlcontrol for more info on HtmlControl
		// var html='<div class="htmlControl" style="padding:0px 3px 3px 3px">Enable clustering: <input type="checkbox" checked="checked" onclick="toggleClustering()" /></div>';
		// var control=new HtmlControl(html);
		// map.addControl(control, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,7)));
	}
}



function newMarker(markerLocation, infoWindowHtml, adres, plaats, prijs, youtube_url, makelaar, www, makelaarid, label, icon) {
// use the new markerTitle variable
var marker=new GMarker(markerLocation, {icon:icon, title:''+adres+' - '+plaats+''});
GEvent.addListener(marker, 'click', function() {
//hier staat de HTML t.b.v. de popupballon
//marker.openInfoWindowHtml('<p>'+infoWindowHtml+'</p><p>'+prijs+'</p>');
marker.openInfoWindowHtml('<span class="titels_groen"><font color="#000">'+adres+' - '+plaats+'</font></span><br><table width="300" height="120"class="border_ballon" cellpadding="0" cellspacing="10" background="images_website/achter_balon.jpg"><tr><td width="100" height="60"><a href="javascript:GroupDelegate(\'http://www.youtube.com/watch?v='+youtube_url+'\', \'Meer informatie? klik <a href='+"http://"+www+""+'>hier</a> voor de website van:<br> '+makelaar+'\')" ><img src="http://img.youtube.com/vi/'+youtube_url+'/default.jpg?h=60&w=100" border="1" style="border-color:#000" ></a></td><td valign="top" align="center"><br><font color="#000000"><b>Prijs: &euro; '+prijs+',-&nbsp;k.k.</b></font><br><br><a href="javascript:GroupDelegate(\'http://www.youtube.com/watch?v='+youtube_url+'\', \'Meer informatie? klik <a href='+"http://"+www+""+'>hier</a> voor de website van:<br> '+makelaar+'\')" >Klik hier óf op de afbeelding om de webvideo te bekijken.</a></td></tr></table><br><img src="images_website/pijltje.png" width="15" height="15" border="0" align="absmiddle" >&nbsp;<a href="#" onClick="javascript:MOOdalBox.open(\'http://www.onlinebezichtigen.nl/php/contact_makelaar_iframe.php?object_id='+label+'&makelaar_id='+makelaarid+' \',\'Verplichte velden zijn aangegeven met een • \', \'500 350\')" >Neem contact op met '+makelaar+'</a><br><img src="images_website/pijltje.png" width="15" height="15" border="0" align="absmiddle" >&nbsp;<a href="#" target="new">Óf klik hier voor de website</a>');
});
return marker;
}




function toggleClustering() {
	cluster.clusteringEnabled=!cluster.clusteringEnabled;
	cluster.refresh(true);	//	true required to force a full update of the markers - otherwise the update would occur next time that the map is zoomed or the active markers change
}