Ember-google-maps-markerclustererplus NPM

MarkerClustererPlus for Ember Google Maps

Add marker clustering to ember-google-maps using @googlemaps/markerclustererplus.

What is 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.

🔗 Compatibility

Ember Google Maps v4.2 or above
Ember.js v3.16 or above
Ember CLI v3.16 or above
Node.js v10 or above

⚙️ Installation

ember install ember-google-maps-markerclustererplus

⭐ Usage

A version of the following guide, together with a demo, is included in the ember-google-maps docs →.

Cluster some markers

The markerClusterer works in the same way as any other ember-google-maps component. If you're not sure what that means, read through the general guide for ember-google-maps →.

The MarkerClustererPlus library 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 →

The markerClusterer yields its own special marker that's added to the cluster instead of the map. Don’t confuse it with the regular marker yielded by the map itself!

<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>

Handle 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>

Get the `MarkerClusterer` instance

The best way to do this is to register a one-time event with @onceOn.

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

  <map.markerClusterer
    @onceOnClusteringend={{this.getMarkerClusterer}}
    as |cluster|>

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

  </map.markerClusterer>
</GMap>

More cluster icons

The MarkerClustererPlus library comes with a small collection of default cluster icons to choose from. They're all copied to /assets/markerclustererplus/images/.