How to add MarkerClusterer to my google map - php

Question

I'm trying to add the Google Cluster to my map, but i cant work out how to do it? i have created the map and its markers with info box using mysql query in php. know i'm adding more markers they are over lapping so i need to add the cluster command but i can't get it working. my code is below
<script>
$(document).ready(function() {
//------- Google Maps ---------//
// Creating a LatLng object containing the coordinate for the center of the map
var latlng = new google.maps.LatLng(53.0,0);
// Creating an object literal containing the properties we want to pass to the map
var options = {
zoom: 5, // This number can be set to define the initial zoom level of the map
center: latlng,
disableDefaultUI: true,
panControl: false,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP, // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
styles: [
{
"featureType": "landscape.natural",
"stylers": [
{ "visibility": "simplified" },
{ "color": "#07c6ee" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "visibility": "on" },
{ "hue": "#6e00ff" },
{ "gamma": 1.96 },
{ "lightness": 18 },
{ "saturation": -78 },
{ "color": "#46fcb3" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "simplified" },
{ "color": "#f9ec55" }
]
},{
},{
"featureType": "road.highway",
"stylers": [
{ "visibility": "on" },
{ "color": "#7b8080" }
]
},{
"featureType": "road.arterial",
"stylers": [
{ "visibility": "on" },
{ "color": "#808080" }
]
},{
"featureType": "road.local",
"stylers": [
{ "color": "#808080" },
{ "visibility": "on" }
]
},{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#fefffe" },
{ "visibility": "on" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
}
]
};
// Calling the constructor, thereby initializing the map
var map = new google.maps.Map(document.getElementById('map_div'), options);
// Define Marker properties
var image1 = new google.maps.MarkerImage('http://www.foodhawkers.co.uk/images/map-market.png',
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(40, 40),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(40, 40)
);
//
// Add Marker
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(51.4636101,-0.1382557),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map, marker1);
});
// Add information window
var infowindow1 = new google.maps.InfoWindow({
content: createInfo('Venn Street Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(51.5367954,-0.0618898),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map, marker2);
});
// Add information window
var infowindow2 = new google.maps.InfoWindow({
content: createInfo('Broadway Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(51.4721386,-2.7580983),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map, marker3);
});
// Add information window
var infowindow3 = new google.maps.InfoWindow({
content: createInfo('StrEAT Food Market', '<div style="width:200px">We\'re really hoping to be doing some amazing street food nights in the CENTRE of...</div><br /><br />View profile')
});
var marker4 = new google.maps.Marker({
position: new google.maps.LatLng(51.5945845,-0.1302629),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map, marker4);
});
// Add information window
var infowindow4 = new google.maps.InfoWindow({
content: createInfo('Alexandra Palace Farmers Market', '<div style="width:200px">Sundays 10:00 - 15:00...</div><br /><br />View profile')
});
var marker5 = new google.maps.Marker({
position: new google.maps.LatLng(51.5050824,-0.0900808),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker5, 'click', function() {
infowindow5.open(map, marker5);
});
// Add information window
var infowindow5 = new google.maps.InfoWindow({
content: createInfo('Borough Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var marker6 = new google.maps.Marker({
position: new google.maps.LatLng(51.5057757,-0.1168251),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker6, 'click', function() {
infowindow6.open(map, marker6);
});
// Add information window
var infowindow6 = new google.maps.InfoWindow({
content: createInfo('The Real Food Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var marker7 = new google.maps.Marker({
position: new google.maps.LatLng(51.5005095,-0.1131232),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker7, 'click', function() {
infowindow7.open(map, marker7);
});
// Add information window
var infowindow7 = new google.maps.InfoWindow({
content: createInfo('Lower Marsh Market', '<div style="width:200px">Lower Marsh is steeped in history as one of London’s oldest and best-loved market streets....</div><br /><br />View profile')
});
var marker8 = new google.maps.Marker({
position: new google.maps.LatLng(51.4682204,-0.0259369),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker8, 'click', function() {
infowindow8.open(map, marker8);
});
// Add information window
var infowindow8 = new google.maps.InfoWindow({
content: createInfo('Brockley Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var marker9 = new google.maps.Marker({
position: new google.maps.LatLng(51.4528397,-0.1019773),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker9, 'click', function() {
infowindow9.open(map, marker9);
});
// Add information window
var infowindow9 = new google.maps.InfoWindow({
content: createInfo('Herne Hill Farmers Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var markerCluster = new MarkerClusterer(options, markers);
// Create information window
function createInfo(title, content) {
return '<div class="infowindow"><strong>'+ title +'</strong><br />'+content+'</div>';
}
});
</script>

Answer 1

Which version of MC you are using? Because version 2.0.x has following construct syntax:
var markerCluster = new MarkerClusterer(map, opt_markers, opt_options);
Try this:
var markerCluster = new MarkerClusterer(map);
markerCluster.addMarker(marker1);
...
markerCluster.addMarker(marker9);
Or, keep Your markers in array, add this to top of Your code:
var markers = [];
After declaring each marker add it to that array:
markers.push(markerN);
And add all of them at once to cluster:
markerCluster.addMarkers(markers);