Create MarkerCluster in Google Maps | MarkerCluster example in Google Maps

Download Source Code

Introduction

Here, I will explain how to create MarkerCluster in Google Map to group a large number of markers.

MarkerCluster Example

Description

MarkerCluster is a client side library that groups a large number of markers on Google Map into clusters. MarkerCluster is a grid based clustering where map is divided into square grids and markers found in a grid are grouped into a cluster to create a single marker. A cluster indicate the number of markers inside it and expands on zooming-in or clicking on the map.

To create MarkerCluster, first we need to import  MarkerCluster library (markerclusterer.js). Then create an object of MarkerCluster object and pass google.maps.Map object and google.maps.Marker array object to its parameter

var markerCluster = new MarkerClusterer(myMap, markers);

MarkerCluster Example

<!DOCTYPE html>
<html>
<head runat="server">
<title>Google Maps MarkerCluster</title>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!--<script src="markerclusterer.js" type="text/javascript"></script>-->
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(23.195307, 77.370873),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Create map
var myMap = new google.maps.Map(document.getElementById("mapArea"),
mapOptions);

var locations = [['28.630290', '77.195799'],
['28.622455', '77.220174'],
['28.619291', '77.214853'],
['28.612736', '77.237341'],
['28.613037', '77.199318'],
['28.511456', '77.185713'],
['28.512285', '77.190391'],
['28.506968', '77.202493'],
['28.511003', '77.204296'],
['28.471965', '77.510497'],
['28.469702', '77.531010'],
['28.472569', '77.514016'],
['28.473550', '77.529551'],
['28.460572', '77.536589'],
['28.464496', '77.530603'],
['28.462383', '77.532963'],
['28.455969', '77.533156'],
['23.293099', '77.366753'],
['23.286161', '77.377052'],
['23.273546', '77.427864'],
['23.223075', '77.407265'],
['23.229385', '77.480049'],
['23.195307', '77.370873'],
['23.216764', '77.484856'],
['23.216133', '77.376366'],
['23.265661', '77.472196'],
['23.234827', '77.436790'],
['23.226269', '77.432456'],
['23.227216', '77.437091'],
['23.224692', '77.430739'],
['23.230491', '77.433819'],
['24.784597', '84.974914'],
['24.797843', '84.983325'],
['24.797376', '84.975429'],
['24.786934', '84.967875'],
['24.775557', '84.963412'],
['24.748902', '84.941268'],
['24.780545', '84.990363'],
['24.792077', '85.007873'],
['24.752020', '84.988990'],
['24.804232', '85.004611'],
['24.766829', '85.007873'],
['24.770803', '84.960365'],
['24.766227', '84.954821'],
['24.766773', '84.954939'],
['24.768010', '84.955658'],
['24.768594', '84.955787'],
['24.768711', '84.957257'],
['24.769539', '84.955776'],
['24.769461', '84.958405'],
['28.580142', '77.237684'],
['28.579200', '77.239229'],
['28.579275', '77.246353'],
['28.576977', '77.244636'],
['28.576977', '77.244636'],
['28.576750', '77.250430'],
['28.564831', '77.245151'],
['28.564040', '77.243778'],
['28.563945', '77.242490'],
['28.562909', '77.246567'],
['28.559437', '77.238928'],
['28.558164', '77.236439'],
['28.559580', '77.238029'],
['28.560285', '77.237694'],
['28.558977', '77.238930'],
['28.553303', '77.239295'],
['28.558053', '77.245260'],
['22.862979', '70.801176'],
['22.711046', '71.636137'],
['22.310151', '70.790190'],
['21.989622', '70.762724'],
['22.264406', '68.977446'],
['21.525357', '70.460600'],
['22.205932', '70.087065']];

var markers = [];
for (var i = 0; i < locations.length; i++) {
var latLng = new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({'position': latLng});
markers.push(marker);
}

var markerCluster = new MarkerClusterer(myMap, markers);
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="mapArea" style="width: 600px; height: 700px;">
</div>
</form>
</body>
</html>

Here, to create MarkerCluster we have stored location data(latitude/longitude) in an array.  In the following example we are loading location data stored in a JSON file.

MarkerCluster Example using JSON data

<!DOCTYPE html>
<html>
<head runat="server">
<title>Google Maps MarkerCluster using JSON</title>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!--<script src="markerclusterer.js" type="text/javascript"></script>-->
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"
type="text/javascript"></script>
<script type="text/javascript" src="location.json"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(23.195307, 77.370873),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Create map
var myMap = new google.maps.Map(document.getElementById("mapArea"),
mapOptions);

var locations = [];

var markers = [];
for (var i = 0; i < locationdata.locations.length; i++) {
var location=locationdata.locations;
var latLng = new google.maps.LatLng(location[i].latitude, location[i].longitude);
var marker = new google.maps.Marker({'position': latLng});
markers.push(marker);
}

var markerCluster = new MarkerClusterer(myMap, markers);
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="mapArea" style="width: 600px; height: 700px;">
</div>
</form>
</body>
</html>

Here, we are retrieving location data from a JSON file location.json to built markers.

Leave a Reply

Your email address will not be published. Required fields are marked *