Google Maps Api v3, self made cluster icon - google-maps

Question

Is there any way we can use our self made icon for the cluster other than the icons from the library?
This is my code, without the styles option the page works fine but with the styles option the map doesn't load along with the rest of the markers
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var latLong = new google.maps.LatLng(latitude, longitude);
var locations = [
['Bondi Beach','nepal', 27.893, 85.667, 4],
['Coogee Beach','nepal', 27.883, 85.657, 5],
['Cronulla Beach', 'nepal', 27.873, 85.647, 3],
['Manly Beach', 'nepal',27.863, 85.637, 2],
['Maroubra Beach', 'nepal',27.69, 85.427, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: latLong,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI:true
});
var geomarker = new google.maps.Marker({
position: latLong,
map: map,
title: 'your location',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(geomarker, 'click', (function(geomarker) {
return function() {
infowindow.setContent('You are here');
infowindow.open(map, geomarker);
}
})(geomarker));
var markers=[], i;
for (i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3])
//map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, {
styles: [{
url: '../img/logo.png'
}, {
url: '../imglogo.png'
}, {
url: '../img/logo.png'
}]);

Answer 1

Yes, according to the documentation:
http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/1.0/docs/reference.html
The MarkerClusterer constructor takes a MarkerClustererOptions object, which can contain an array of styles that include image URLs. The documentation is a bit lacking in actual examples demonstrating that, although you can see it happening here if you change the Cluster Style:
https://googlemaps.github.io/js-marker-clusterer/examples/advanced_example.html
I think you'd just need to do something like:
markerClusterer = new MarkerClusterer(map, markers, {
styles: [{
url: '../images/people35.png'
}, {
url: '../images/people45.png'
}, {
url: '../images/people55.png'
}]
});