Marker Clustering In Google Maps

What is a marker cluster?

Marker cluster is a combination of markers to display a large number of markers on the Google Map. Using the master clustering library with Google Maps we can display clusters on the map. Master clustering is done when we have a large number of markers to display on the Map. It simplifies the display of a large number of markers in the small area of the map. Sometimes we have markers very close enough to each other that they overlap. We can't show markers in these cases and its a mess on the map. In such scenarios, we will use Marker Clustering. The user experience will be very good. Marker Clustering is an open-source library for map utilities. 
See the below screenshot for overlapping markers. Now we will apply Marker Clustering as a solution.



How it works? 

This library uses the Grid-based clustering mechanism. It divides the map into the various squares of a specified size and then it groups markers into these squares. It will create one cluster at a marker location and group the markers which are bounded to that location into that cluster. It continues this process of assigning markers to the closest grid-based cluster. If a marker is bound to two clusters, In that case, the Map Javascript API determines the distance of marker from each cluster and adds the marker to the shortest distance cluster.

Now we will see how we can add Marker Clustering. In the below example, master clustering will look different at different zoom levels as grid-size will vary accordingly.




Adding Marker Clustering

Now we will see the steps to add Marker Clustering library to our code:
  • First of all, we will add a master clustering library to our code. We will add the masterclusterer.js library as follows using the <script> tag.
  • <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    
  • Add marker clusters using the below code.
  • 
          var markerCluster = new MarkerClusterer(map, markers,
            {
              imagePath:
                'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
            });
    

Example For Marker Clustering

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Marker On Map</title>
  <style>
    #Gmap {
      height: 600px;
      width: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="Gmap"></div>
  <script>
    function initMap() {
      var locations = [
        { lat: -31.563910, lng: 147.154312 },
        { lat: -33.718234, lng: 150.363181 },
        { lat: -33.727111, lng: 150.371124 },
        { 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 },

      ];
      var mapOptions = {
        streetViewControl: false,
        center: { lat: -45.67677, lng: -90.253456 },
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.HYBRID,
      };
      var map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);
      var markers = locations.map(function (location) {
        return new google.maps.Marker({
          position: location,
          map: map
        });
      });
      console.log(markers);
      var markerCluster = new MarkerClusterer(map, markers,
        {
          imagePath:
            'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
        });

    }
  </script>
  <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=AIzaSyDShdMS18_xwv3VHpzQlGgr10v0SmD7SyE&callback=initMap">
    </script>
</body>
</html>

Customizing Marker Clusters

We can change the grid size, max zoom, text color, text size and image for the clusters by adding options. We can customize the marker cluster icon as well using the imagePath option. Other options available are as follows:
  • gridSize: the number of pixels in the cluster.
  • zoomOnClick: whether to zoom the cluster on user click or not
  • maxZoom: what level we can zoom before regular markers appear.
  • styles: ar array of the object for each cluster type. we can change the textColor, textSize, etc using this option. 
  • imagePath: this defines the path for the cluster image. Read 

  const clusterOptions = {
        imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
        gridSize: 40,
        zoomOnClick: false,
        maxZoom: 10
      }
      var markerCluster = new MarkerClusterer(map, markers, clusterOptions);

Comments