var map, cluster;

function myOnLoad() {
	if (GBrowserIsCompatible()) {
		map=new GMap2(document.getElementById('map'));
		map.setCenter(new GLatLng(0, 0), 0, G_NORMAL_MAP);
		
		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=[];
		
		/*	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
		*/
		
		for (var i=0; i<json.length; i++) {
			marker=newMarker(new GLatLng(json[i].lat, json[i].lng), json[i].id);
			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, markerId) {
	var marker=new GMarker(markerLocation, {title:'Marker['+markerId+']'});
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml('<p>Marker['+markerId+'] clicked.</p>');
	});
	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
}