Handling huge amount of markers on Google Maps with clusters

If you used Google Maps in your projects as a developer, probably you faced with a problem to display huge amount of markers on the map. Problem seems more User Interface related, than technical. On small zoom it does not look good. I solved it using a very nice marker clustering library available from Google.

# How marker cluster looks like

On the map below try to zoom in/out to see nice little penguins.

// ]]>

# How to use it in your code

Usage is very simple and clear, have a code snipped below

var markerCluster = new MarkerClusterer(map, marker_list);

map - Google Map object
marker_list - javascript array of all markers added to the map

Indeed very simple!!

# Advanced usage

There are some configuration options, that can change default behaivior. In this example I change cluser size and colors:

var markerCluster = new MarkerClusterer(map, marker_list, {
    gridSize:40,
    minimumClusterSize: 4,
    calculator: function(markers, numStyles) {
       if (markers.length >= 50) return {text: markers.length, index: 3}; // red
       if (markers.length >= 5) return {text: markers.length, index: 2};  // yellow
       return {text: markers.length, index: 0};    }                      // blue
});

map - Google Map object
marker_list - javascript array of all markers
gridSize - determines how many markers to unite into cluster
minimumClusterSize - clear by its name
calculator - function to change default cluster text and color

# Full code

document.write('<div id="gmap" style="width:500px; height:500px;"></div>');
// Get center
var map_center = new google.maps.LatLng(0.1700235000, 20.7319823000);

// Load google map
var map = new google.maps.Map(document.getElementById("gmap"), {
    zoom:1,
    center:map_center,
    mapTypeId:google.maps.MapTypeId.HYBRID,
    panControl:false,
    streetViewControl:false,
    mapTypeControl:false
});

var pos;
var marker;
var marker_list = [];
for (var i = 0; i < 100; i++) {
    pos = new google.maps.LatLng(Math.floor(Math.random() * 50), Math.floor(Math.random() * 100));
    marker = new google.maps.Marker({
        position:pos,
        map:map,
        title:'Title',
        icon:'/other/gmap/marker.gif'
    });
    var storyClick = new Function("event", "alert('Click on marker " + i + " ');");
    google.maps.event.addListener(marker, 'click', storyClick);

    marker_list.push(marker);
}

    // Add marker clustering
    var markerCluster = new MarkerClusterer(map, marker_list, {
        gridSize:40,
        minimumClusterSize: 4,
        calculator: function(markers, numStyles) {
	    // Custom style can be returned here
            return {
                text: markers.length,
                index: numStyles
            };
        }
    });

Do not forget to include scripts:

# Several datasource

Have a look at new post with using two datasources with different cluster styles.

# Links

How marker cluster looks like

How to use it in your code