How do I Set Up Clustering on Google Maps Web API

Question

I'm trying to add clustering to Google Maps web project, but so far no luck. Here is what is working:

1. Added a few markers
2. Requested user location (code removed).

markercluster.js is the library file downloaded from the GitHub project and saved in the public.html file.

I have removed the API key for security.

JavaScript Code in HTML Body

    var userPosition;

    var map;
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {

        //center: {lat: -34.928499, lng: 138.600746},
        center: {lat: -33.86882, lng: 151.209296},
    zoom: 13
        });

var markers = [
    {coords:{lat:-34.923885, lng:138.562042}, content:'<p><strong>British Raj</strong></p>'},
    {coords:{lat:-34.924476, lng:138.561141}, content:'<p><strong>Subway (Torrensville)</strong></p>'},
    {coords:{lat:-34.843645, lng:138.507653}, content:'<p>Banyan Hotel Port Adelaide</p>'},
    {coords:{lat:-34.92366, lng:138.567063}, content:'<p>Abyssinian Restaurant</p>'},
    {coords:{lat:-34.923927, lng:138.561959}, content:'<p>Burger Foundry (Torrensville)</p>'}

];

var gmarkers = [];
for(var i = 0; i < markers.length; i++){
    //addMarker(markers[i]);
    gmarkers.push(addMarker(markers[i]));
}

function addMarker(props){
    var marker = new google.maps.Marker({
    position:props.coords,
    map:map,
    icon:'Layer 1.png'
});

if (props.content){
    var infoWindow = new google.maps.InfoWindow({
    content:props.content
});

    marker.addListener('click', function(){
    infoWindow.open(map, marker);
    });
    }
  } 

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

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_REMOVED&callback=initMap"
async defer></script>
<script src="markercluster.js"></stript>

CSS

html, body{
    height: 100%;
    padding: 0;
    margin: 0;
}
#map {
    height: 80%;
    weidth: 80%;
}

Answer 1

There are several issues with your code:

1. The creation of the MarkerClusterer is outside of the initMap function, so it runs before the API is loaded. Move that inside the initMap function.

2. The addMarker function doesn't return anything, so everytime you create a marker you add "undefined" to the gmarkers array (add: return marker; to the end of the function).

3. Based on the example in the documentation, you need to load markerclusterer.js before the Google Maps JavaScript API v3.

proof of concept fiddle

code snippet:

var userPosition;
var gmarkers = [];
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {

    //center: {lat: -34.928499, lng: 138.600746},
    center: {
      lat: -33.86882,
      lng: 151.209296
    },
    zoom: 13
  });

var markers = [
    {coords:{lat:-34.923885, lng:138.562042}, content:'<p><strong>British Raj</strong></p>'},
    {coords:{lat:-34.924476, lng:138.561141}, content:'<p><strong>Subway (Torrensville)</strong></p>'},
    {coords:{lat:-34.843645, lng:138.507653}, content:'<p>Banyan Hotel Port Adelaide</p>'},
    {coords:{lat:-34.92366, lng:138.567063}, content:'<p>Abyssinian Restaurant</p>'},
    {coords:{lat:-34.923927, lng:138.561959}, content:'<p>Burger Foundry (Torrensville)</p>'}

];

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    //addMarker(markers[i]);
    gmarkers.push(addMarker(markers[i]));
    bounds.extend(markers[i].coords);
  }
  map.fitBounds(bounds);

  function addMarker(props) {
    var marker = new google.maps.Marker({
      position: props.coords,
      map: map,
    });

    if (props.content) {
      var infoWindow = new google.maps.InfoWindow({
        content: props.content
      });

      marker.addListener('click', function() {
        infoWindow.open(map, marker);
      });
    }
    return marker;
  }
  var markerCluster = new MarkerClusterer(map, gmarkers, {
    imagePath: 'https://unpkg.com/@google/[email protected]/images/m'
  });

}

/* 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;
}

<div id="map"></div>
<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>