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),

    <!--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



      <!--Listener for clicking point "logo" -->"
      google.maps.event.addListener(marker, 'click', function(event) {

      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(
                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);



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



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;

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
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.