Google maps jQuery plugin clustering example

Using jquery with Google maps

Download jQuery 1.4.X or higher or use Googles or Microsofts CDN.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="PATH_TO_MARKER_CLUSTERER_V_2.0.6/markerclusterer.js"></script>
<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script>

// We need to bind the map with the "init" event otherwise bounds will be null
$('#map_canvas').gmap({'zoom': 2, 'disableDefaultUI':true}).bind('init', function(evt, map) { 
	var bounds = map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
	var lngSpan = northEast.lng() - southWest.lng();
	var latSpan = northEast.lat() - southWest.lat();
	for ( var i = 0; i < 1000; i++ ) {
		var lat = southWest.lat() + latSpan * Math.random();
		var lng = southWest.lng() + lngSpan * Math.random();
		$('#map_canvas').gmap('addMarker', { 
			'position': new google.maps.LatLng(lat, lng) 
		}).click(function() {
			$('#map_canvas').gmap('openInfoWindow', { content : 'Hello world!' }, this);
		});
	}
	$('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
	// To call methods in MarkerClusterer simply call 
	// $('#map_canvas').gmap('get', 'MarkerClusterer').callingSomeMethod();
});

There are many ways of writing this snippet, please refer to the sample code section in the wiki.