Trying to get Spiderfier to work with MarkerClusterer in Google Maps

Question

I have just over 100 points to display on a map and had it working fine. Quite a few of these points are displayed at the exact same coordinate position so sit on top of each other. To make it so these are able to be viewed I added Spiderfier which also worked fine. However I wanted to have it so that these were represented with a number so I tried to add MarkerClusterer. Now while MarkerClusterer is working it is overwriting spiderfier and now they won't split when clicked.

How can I get them to work together?

Here is my code:

<script type="text/javascript">

  google.load("visualization", "1", {packages:["corechart"]});

<!--Make Map-->
window.addEventListener('load',function initialize() {
    <!--Map Options-->
    var mapDiv = document.getElementById('map-canvas');
    var MapOptions = {
    center: new google.maps.LatLng(-31.950804, 115.860485),
    zoom:10
    };

    <!--Load Map Window-->
    var map = new google.maps.Map(mapDiv,MapOptions);


    var oms = new OverlappingMarkerSpiderfier(map);


    <!--Query Fusion Table "Teams"-->
    var query = "SELECT 'TEAM NAME',SUBURB,Lat,Lng,LogoName FROM 15XW2l-mxElk3qejK2lMgV2kukDh-FMOdjl6IRnwO";
    query = encodeURIComponent(query);
    var gvizQuery = new google.visualization.Query(
        'http://www.google.com/fusiontables/gvizdata?tq=' + query);



    <!--Create Marker Function-->
    var createMarker = function(teamname,suburb,coordinates,icon) {

        var marker = new google.maps.Marker({
            <!--Marker Options-->
            map: map,
            position: coordinates,
            icon: icon,
            title: teamname

      });

       oms.addMarker(marker);

      <!--Listener for clicking point "logo" -->"
      google.maps.event.addListener(marker, 'click', function(event) {
        infoWindow.setPosition(coordinate);
        infoWindow.setContent(teamname);
        infoWindow.open(map);
      });

      return marker

    };

    <!--get number of rows-->
    gvizQuery.send(function(response) {
        var numRows = response.getDataTable().getNumberOfRows();

        var markers = [];

        <!--Loop through rows-->
        for (var i = 0; i < numRows; i++) {

            <!--Get row values-->
            var teamname = response.getDataTable().getValue(i, 0);
            var suburb = response.getDataTable().getValue(i, 1);
            var lat = response.getDataTable().getValue(i, 2);
            var lng = response.getDataTable().getValue(i, 3);
            var logoname = response.getDataTable().getValue(i, 4);

            var coordinates = new google.maps.LatLng(lat, lng);
            var icon;
            icon = new google.maps.MarkerImage(
                'images/'+logoname+'.png',
                null,
                null,
                new google.maps.Point(0, 0),
                new google.maps.Size(40, 40)
                );
            <!--Feed row values to createMarker-->
            var mark = new createMarker(teamname,suburb,coordinates,icon);

            markers.push(mark);

        };

    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
    });


});






</script>

Answer 1

For future reference if anyone else is having trouble I discovered the answer thanks to user "Cameron" here: https://stackoverflow.com/a/11637276/5478481

Max Zoom needs to be set.

minClusterZoom = 14;
markerCluster.setMaxZoom(minClusterZoom);

Stop over zooming.

    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
    map.fitBounds(cluster.getBounds()); // Fit the bounds of the cluster clicked on
    if( map.getZoom() > minClusterZoom+1 ) // If zoomed in past 15 (first level without clustering), zoom out to 15
        map.setZoom(minClusterZoom+1);
 });