Styling MarkerClusterer Icons?

Question

I am using the MarkerCluster.js to create clustering in my google maps api. The clusters work how I want them however I want to style differently than yellow, blue and red circles. I was trying to use the MarkerStyleOptions and it says you have an array of styles with the smallest cluster icon first and the biggest last. I tried to create this below but I am getting really confused about what syntax to use and can't find any good examples.

var clusterStyles = [     [opt_textColor: 'white'],     [opt_textColor: 'white'],     [opt_textColor: 'white'] ];  var mcOptions = {     gridSize: 50,     styles: clusterStyles,     maxZoom: 15 }; var markerclusterer = new MarkerClusterer(map, cluster, mcOptions); 

Answer 1

What you need to do is use the url to specify which images to use instead of the blue/yellow/red images currently being used. And probably a good idea to include the height and width options too.

var clusterStyles = [   {     textColor: 'white',     url: 'path/to/smallclusterimage.png',     height: 50,     width: 50   },  {     textColor: 'white',     url: 'path/to/mediumclusterimage.png',     height: 50,     width: 50   },  {     textColor: 'white',     url: 'path/to/largeclusterimage.png',     height: 50,     width: 50   } ]; 

Answer 2

It's never too late to post a rather helpful answer, so additionally you can look through the whole MarkerClusterer Documentation for IconStyle

UPDATE

There's also google maps v3 utility on github as stated by ehcanadian