ONE NET WIKI Free and professional IT Wiki

6 steps to add Marker Clusters on Google Maps Using Google Maps API

2018-09-10 ONE NET WIKI

2018-09-10_221524.png

When you need to use 20 markers but they are close to each other, you might notice how terrible the map looks with many markers next to the each other. Marker clusters will be a perfect solution.

Marker clusters is used to display a large number of markers on a map.

The MarkerClusterer library can be used in combination with the but once you would like to have like 20 markers and they are close to each other you might notice a new problem. Check on the screen below how terrible the map looks with many markers next to the each other. to combine markers of close proximity into clusters, and simplify the display of markers on the map.

The entire sample code has been copied from the developer's website of Google.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <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>
    <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=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

1. Marker labels

Variable labels allows you to “name” your markers. The value which you have inserted will be displayed on a marker as its label.

If you insert “1234567” markers will be displayed with the numbers. If you want to display numbers with the letter then you can insert “A1B2B56” etc.

1a.png


2. Multiple Markers Display function

The function reads your locations and label values and then gives every marker its label.

1b.png


3. Marker Cluster object

The object markerCluster is used to manage the markers. 

You can set the imagePath so the clusters will look just as you want.

2018-09-10_224923.png


4. Your Locations

You add all locations to have on your map by their latitude and longitude.

2.png


5. Add the marker clustering library

Add the markerclusterer.js library file to the page.

2018-09-10_225221.png


6. Add the Google Maps JavaScript API library with API key

6.png

Editor's Note: All the articles in this website are original. If reproduced, please indicate the source and link.
1290
0
All Comments (0)
Expand to publish a comment

Web Development


Web Management


Web Marketing


Web Security