Google地图：无法自定义MarkerClusterer图标

Question

我创建了一个带有标记和infowindows的gmap（在geocodezip的帮助下）并且还添加了MarkerClusterer。但是，当我尝试自定义群集图标时，代码不起作用。我为样式创建了一个变量，并将其包含在mcOptions变量中以及gridSize和maxZoom中，并在MarkerClusterer构造中调用它。
是因为我需要将mcOptions var放在其他地方吗？

Fiddle

function initialize() {
    var map_options = {
        center: new google.maps.LatLng(35, -118),
        zoom: 10
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

    var image = {
        url: 'http://oi59.tinypic.com/snmjj8.jpg',
        scaledSize: new google.maps.Size(150, 80),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(75, 40),
    };

    var markers = [
        ['Marker1', 38.576725, -121.493715, 1],
        ['Marker2', 38.576, -121.493, 2],
        ['Marker3', 38.577, -121.493, 3],
        ['Marker4', 38.578, -121.493, 4],
        ['Marker5', 38.579, -121.493, 5],
        ['Marker6', 35.011263, -115.473376, 6],
        ['Marker7', 33.941820, -118.408466, 7]
    ];

    var content = [
        ['<div id="bodyContent">' + '<p>Text1</p>' + '</div>'],
        ['<div id="bodyContent">' + '<p>Text2</p>' + '</div>'],
        ['<div id="bodyContent">' + '<p>Text3</p>' + '</div>'],
        ['<div id="bodyContent">' + '<p>Text4</p>' + '</div>'],
        ['<div id="bodyContent">' + '<p>Text5</p>' + '</div>'],
        ['<div id="bodyContent">' + '<p>Text6</p>' + '</div>'],
        ['<div id="bodyContent">' + '<p>Text7</p>' + '</div>']
    ];

    var clusterStyles = [
        url: 'http://oi59.tinypic.com/snmjj8.jpg',
        height: 150,
        width: 80
    ];

    var mcOptions = [
        gridSize: 20,
        styles: clusterStyles,
        maxZoom: 15
    ];

    var bounds = new google.maps.LatLngBounds();
    var infoWindow = new google.maps.InfoWindow();
    var gmarkers = [];
    var marker, i;

    for (i = 0; i < markers.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers[i][1], markers[i][2]),
            map: map,
            icon: image,
            title: markers[i][0]
            /*,
            zIndex: markers[i][3] */
        });
        bounds.extend(marker.getPosition());

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infoWindow.setContent(content[i][0]);
                infoWindow.open(map, marker);
                //this.getTitle()+"<br>"+this.getPosition().toUrlValue(6)    
            }
        })(marker, i));
        gmarkers.push(marker);
    };
    var mc = new MarkerClusterer(map, gmarkers, mcOptions);
    map.fitBounds(bounds);
};
google.maps.event.addDomListener(window, 'load', initialize);