Search code examples
javascriptgoogle-mapsgoogle-maps-api-3markerclusterer

Google Map Clusterer

I've got the Cluster Marker working successfully on some markers, however, it seems that if the area is too congested the cluster won't appear. I'm using the Javascript API. 

  this.map = new google.maps.Map(map, mapOptions);
  this.markers = data.map((location) => {
    if (location.location === null) return
    const marker = new google.maps.Marker({
      position: { lat: location.location.coordinates[0], lng: location.location.coordinates[1]},
      map: this.map
    });
    return marker
  });
  const markerCluster = new MarkerClusterer(this.map, this.markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

I would post an image but I need more reputation.

enter image description here

Should I switch to a heatmap or is this a known limitation of the cluster library?

EDIT It seems when I limit the amount of markers to 179, it clusters them all, but when I limit to 180, the 180th is placed outside the cluster

Solution

  • There is no limitation of 180 markers in the MarkerClusterer library. When you have a look at this example you can see over 400 markers clustered depending on the gridSize.

    Your gridSize shouldn't be too small so a bigger area of markers is clustered, but you seem to use the default options, which should work in your example.

    You don't have to define the map when creating the markers - the markerClusterer takes care of displaying them on the map.

    this.markers = [];
data.forEach(function(entry) {
    if (entry.location === null) return
    marker = new google.maps.Marker({
        position: { 
            lat: location.location.coordinates[0],
            lng: location.location.coordinates[1]
        }
    });
    markers.push(marker);
});
markerCluster = new MarkerClusterer(this.map, this.markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

    Also check out the following options of the markerClusterer to configure it to your needs:

    • gridSize: The grid size of a cluster in pixels.
    • maxZoom: The maximum zoom level that a marker can be part of a cluster.
    • minimumClusterSize: The minimum number of markers to be in a cluster before the markers are hidden and a count is shown.