How to use marker clusters on a Google map?

This tutorial shows you how to use marker clusters to display a large number of markers on a map. You can use the MarkerClusterer library in combination with the Google Maps JavaScript API to combine markers of close proximity into clusters, and simplify the display of markers on the map.

The MarkerClusterer library uses the grid-based clustering technique that divides the map into squares of a certain size (the size changes at each zoom level), and groups the markers into each square grid. It creates a cluster at a particular marker, and adds markers that are in its bounds to the cluster. It repeats this process until all markers are allocated to the closest grid-based marker clusters based on the map's zoom level. If markers are in the bounds of more than one existing cluster, the Maps JavaScript API determines the marker's distance from each cluster, and adds it to the closest cluster.

You can set a MarkerClusterer option to adjust the cluster position to reflect the average distance between all the markers that are contained within it. You can also customize the MarkerClusterer to modify other parameters like the grid size, the cluster icon, cluster text, among others.

<!DOCTYPE html><html>  <head>    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">    <meta charset="utf-8">    <title>Marker Clustering</title>        <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">    </script>    <script async defer     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBO4zImp8oXmRoD8GU9_6UHsoNgpJ6H9C8&callback=initMap">    </script>    <style>      /* Always set the map height explicitly to define the size of the div        * element that contains the map. */       #map {         height: 100%;       }       /* Optional: Makes the sample page fill the window. */       html, body {         height: 100%;         margin: 0;         padding: 0;       }     </style>  </head>  <body>    <div id="map">
</div>
<script>       function initMap() {          var map = new google.maps.Map(document.getElementById('map'), {           zoom: 3,           center: {lat: -28.024, lng: 140.887}         });          // Create an array of alphabetical characters used to label the markers.         var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';          // Add some markers to the map.         // Note: The code uses the JavaScript Array.prototype.map() method to         // create an array of markers based on a given "locations" array.         // The map() method here has nothing to do with the Google Maps API.         var markers = locations.map(function(location, i) {           return new google.maps.Marker({             position: location,             label: labels[i % labels.length]           });         });          // Add a marker clusterer to manage the markers.         var markerCluster = new MarkerClusterer(map, markers,             {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});       }       var locations = [         {lat: -31.563910, lng: 147.154312},         {lat: -33.718234, lng: 150.363181},         {lat: -33.727111, lng: 150.371124},         {lat: -33.848588, lng: 151.209834},         {lat: -33.851702, lng: 151.216968},         {lat: -34.671264, lng: 150.863657},         {lat: -35.304724, lng: 148.662905},         {lat: -36.817685, lng: 175.699196},         {lat: -36.828611, lng: 175.790222},         {lat: -37.750000, lng: 145.116667},         {lat: -37.759859, lng: 145.128708},         {lat: -37.765015, lng: 145.133858},         {lat: -37.770104, lng: 145.143299},         {lat: -37.773700, lng: 145.145187},         {lat: -37.774785, lng: 145.137978},         {lat: -37.819616, lng: 144.968119},         {lat: -38.330766, lng: 144.695692},         {lat: -39.927193, lng: 175.053218},         {lat: -41.330162, lng: 174.865694},         {lat: -42.734358, lng: 147.439506},         {lat: -42.734358, lng: 147.501315},         {lat: -42.735258, lng: 147.438000},         {lat: -43.999792, lng: 170.463352}       ]     </script>   </body></html>

As a simple illustration, this tutorial adds a set of markers to the map using the locations array. You can use other sources to get markers for your map.

Adding a marker clusterer
Follow the steps below to add a marker clusterer:

1) Get the marker clustering library and images from GitHub, and store them on a server accessible to your app.
The JavaScript library and image files for the MarkerClusterer are available in the Google Maps repo on GitHub. Download or copy the following files from GitHub to a location accessible to your app:
markerclusterer.js
m1.png
m2.png
m3.png
m4.png
m5.png

2) Add the marker clustering library to your page.
In the code for this tutorial, the script below specifies the location of the markerclusterer.js library file on https://developers.google.com.

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">

Change the path to specify the location where you have saved the same file.

3) Add a marker clusterer in your app.
The code below adds a marker clusterer to the map.

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

This sample passes the markers array to the MarkerClusterer. It also specifies the location of all five image files in the imagePath parameter. Replace this with the path to the location where you have saved the same image files.

Demo

How to use marker clusters on a Google map?

No comments:

Post a Comment

Popular Posts

Tags

Contact Form