I am using Marker Clusterer library for Google Maps API V3. Now that I have the clusterer working, I want to change the default icon to a custom one.

Prorblem: When I try to set the style property of the marker clusterer, the default icon still appears. Where did I go wrong?

JS Code

// Marker Clusterer
var styles = {styles: [{
                    height: 53,
                    url: "http://localhost/mywebsite/images/template/markers/cluster.png",
                    width: 53
                },
                {
                    height: 56,
                    url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png",
                    width: 56
                },
                {
                    height: 66,
                    url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png",
                    width: 66
                },
                {
                    height: 78,
                    url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png",
                    width: 78
                },
                {
                    height: 90,
                    url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png",
                    width: 90
                }]};
var mcOptions = {gridSize: 50, maxZoom: 15,  styles: styles[styles]};
mc = new MarkerClusterer(map, [], mcOptions);