Maps API v3 MarkerClusterer

Clustering a good amount of markers on a map

by Kamal Kumawat

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div id="map-canvas"></div>

<label for="markersAmount">Number of markers</label>
<input id="markersAmount" type="text" value="4" />
<br>

<label for="gridSize">Grid size</label>
<input id="gridSize" type="text" value="100" />
<br>

<label for="minimumClusterSize">Minimum cluster size</label>
<input id="minimumClusterSize" type="text" value="2" />
<br>

<input id="refreshMap" type="button" value="Refresh" /><br>

<span id="time"></span>

CSS

body,
html {
    font-family: Arial;
    font-size: 11px;
    line-height: 25px;
}

#map-canvas {
    height: 400px;
    margin-bottom: 10px;
}

label {
    display: inline-block;
    width: 120px;
    margin-right: 10px;
}

JavaScript

var map;
var markers;
var markerCluster;
var markersAmount;
var gridSize;
var minimumClusterSize;
var t0, t1;

function initialize() {

    var center = new google.maps.LatLng(0, 0);

    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 2,
        minZoom: 1,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    refreshMap();
}

function createMarkers() {

    // Define the number of random markers to create
    markersAmount = 4

    // Define the marker cluster grid size
    gridSize = isNaN(document.getElementById('gridSize').value) ? 100 : document.getElementById('gridSize').value;

    // Define the marker cluster minimum cluser size
    minimumClusterSize = isNaN(document.getElementById('minimumClusterSize').value) ? 2 : document.getElementById('minimumClusterSize').value;

    // Empty markers array
    markers = [];

    // Define the max latitude on a mercator projection

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng("38.0406", "84.0037")
    });
    markers.push(marker);
    
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng("38.0406", "84.5037")
    });
    markers.push(marker);

		var marker = new google.maps.Marker({
      position: new google.maps.LatLng("38.0406", "84.6037")
    });
    markers.push(marker);

		var marker = new google.maps.Marker({
      position: new google.maps.LatLng("38.0406", "84.0037")
    });
    markers.push(marker);
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng("38.0406", "84.0037")
    });
    markers.push(marker);
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng("38.0406", "84.0037")
    });
    markers.push(marker);

    // Cluster all the markers
    markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',
        gridSize: parseInt(gridSize),
    ...