Clustering

Drawing a lot of markers in close proximity can quickly turn into a usability nightmare. Grouping, or clustering, markers is a common way of simplifying how markers are displayed when used in large numbers.

You can add support for marker clustering to ember-google-maps by installing an extra addon: ember-google-maps-markerclustererplus. It installs the MarkerClustererPlus library, a clustering library maintained by Google, and adds the markerClusterer component to the map.

ember install ember-google-maps-markerclustererplus

MarkerClustererPlus accepts a bunch of options to configure the clusters. As with any map component, you can pass these options straight to the markerClusterer component. Here’s a full list of supported options ↗

<GMap @lat="51.508530" @lng="-0.076132" as |map|>

  <map.markerClusterer as |cluster|>

    {{#each this.locations as |location|}}
      <cluster.marker @lat={{location.lat}} @lng={{location.lng}} />
    {{/each}}

  </map.markerClusterer>
</GMap>

Default cluster icons

MarkerClustererPlus comes with a small collection of default cluster icons to choose from. These are copied to /assets/markerclustererplus/images/ when your app is built, but you can always set your own using the imagePath option.

Cluster events

You can also register events. You've got your usual suspects, like click, dblclick, and others; and also two special events: clusteringbegin and clusteringend. These are both native, albeit poorly publicized, markerclustererplus events. But beware! These clustering events may be called several times during a single render because MarkerClustererPlus clusters markers in batches.

<GMap @lat="51.508530" @lng="-0.076132" as |map|>

  <map.markerClusterer
    @onClick={{this.whenAClusterMarkerIsClicked}}
    @onClusteringbegin={{this.whenABatchOfMarkersIsToBeClustered}}
    @onClusteringend={{this.whenABatchOfMarkersHasBeenClustered}}
    as |cluster|>

    {{#each this.locations as |location|}}
      <cluster.marker @lat={{location.lat}} @lng={{location.lng}} />
    {{/each}}

  </map.markerClusterer>
</GMap>