Google map Clustering (fluster)

[wemustdesign]

I don't know much javascript and am trying to cluster my points on a Google Map (using Fluster). Below is the example that generates some random points on a map:

 

	// Create a new map with some default settings
    var myLatlng = new google.maps.LatLng(25,25);
    var myOptions = {
      zoom: 6,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Initialize Fluster and give it a existing map
var fluster = new Fluster2(map);

for(var i = 0; i < 200; i++)
{
	var pos = [
		50 * Math.random(),
		50 * Math.random()
	];

	// Create a new marker. Don't add it to the map!
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(pos[0], pos[1]),
		title: 'Marker ' + i
	});

	// Add the marker to the Fluster
	fluster.addMarker(marker);
}

 

Below is how I usually add points. How do I use the above code to add markers, not sure where to add the Lat and Lon for the different markers.

 

map.addOverlay(marker);var point = new GLatLng(54.65246,-2.17804);
var marker = createMarker(point,'<b>High Force Waterfall</b><br /><img src="/images/map_force.jpg" style="float:left; margin-right:4px;" /><div style="background: url(/images/map_logo.jpg) no-repeat top; float:left; font-size:8.5px; padding-top:30px; width:74px; line-height:10px;"><a href="/venues/venuename/High-Force-Waterfall">Find out more about this venue</a></div><br /><div class="clear"></div>');

map.addOverlay(marker);var point = new GLatLng(54.787918,-1.491244);
var marker = createMarker(point,'<b>Hallgarth Manor</b><br /><img src="/images/hall.jpg" style="float:left; margin-right:4px;" /><div style="background: url(/images/map_logo.jpg) no-repeat top; float:left; font-size:8.5px; padding-top:30px; width:74px; line-height:10px;"><a href="/venues/venuename/Hallgarth-Manor">Find out more about this venue</a></div><br /><div class="clear"></div>');

 

Gratefull if someone would point me in the right direction.

[requinix]

Instead of map.addOverlay() use fluster.addMarker().

[wemustdesign]

Thanks very much for your reply, I am going to go and text this now!

 

 

[wemustdesign]

So I have altered the code and have now added the below but am getting an error at the line highlighted below?

 

fluster.addMarker(marker);

var point = new GLatLng(54.787918,-1.491244);

var marker = createMarker(point,'hello');

 

 

Full code:

 

function initialize() {
  	
// Create a new map with some default settings
    var myLatlng = new google.maps.LatLng(54.329338, -3.186035);
    var myOptions = {
      zoom: 6,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

fluster.addMarker(marker);
var point = new GLatLng(54.787918,-1.491244);
var marker = createMarker(point,'hello');