• Version 1.1.0
  • Published
  • 250 kB
  • 1 dependency
  • MIT license


npm i @agm/js-marker-clusterer
yarn add @agm/js-marker-clusterer
pnpm add @agm/js-marker-clusterer


Angular Google Maps (AGM) extension for js-marker-clusterer support



class AgmJsMarkerClustererModule

class AgmJsMarkerClustererModule {}

    class AgmMarkerCluster

    class AgmMarkerCluster implements OnDestroy, OnChanges, OnInit, ClusterOptions {}
    • AgmMarkerCluster clusters map marker if they are near together

      ### Example

      import { Component } from '@angular/core';
      selector: 'my-map-cmp',
      styles: [`
      agm-map {
      height: 300px;
      template: `
      <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
      <agm-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
      <agm-marker [latitude]="lat2" [longitude]="lng2" [label]="'N'">


    constructor(_clusterManager: ClusterManager);

      property averageCenter

      averageCenter: boolean;
      • Whether the center of each cluster should be the average of all markers in the cluster.

      property calculator

      calculator: CalculateFunction;
      • A function that calculates the cluster style and text based on the markers in the cluster.

      property clusterClick

      clusterClick: EventEmitter<void>;

        property gridSize

        gridSize: number;
        • The grid size of a cluster in pixels

        property imageExtension

        imageExtension: string;

          property imagePath

          imagePath: string;

            property maxZoom

            maxZoom: number;
            • The maximum zoom level that a marker can be part of a cluster.

            property minimumClusterSize

            minimumClusterSize: number;
            • The minimum number of markers to be in a cluster before the markers are hidden and a count is shown.

            property styles

            styles: ClusterStyle[];
            • An object that has style properties.

            property zoomOnClick

            zoomOnClick: boolean;
            • Whether the default behaviour of clicking on a cluster is to zoom into it.

            class ClusterManager

            class ClusterManager extends MarkerManager {}


              constructor(_mapsWrapper: GoogleMapsAPIWrapper, _zone: NgZone);

                method addMarker

                addMarker: (marker: AgmMarker) => void;

                  method clearMarkers

                  clearMarkers: () => Promise<void>;

                    method createClusterEventObservable

                    createClusterEventObservable: <T>(eventName: string) => Observable<T>;

                      method deleteMarker

                      deleteMarker: (marker: AgmMarker) => Promise<void>;

                        method getClustererInstance

                        getClustererInstance: () => Promise<MarkerClustererInstance>;

                          method init

                          init: (options: ClusterOptions) => void;

                            method setAverageCenter

                            setAverageCenter: (c: AgmMarkerCluster) => void;

                              method setCalculator

                              setCalculator: (c: AgmMarkerCluster) => void;

                                method setGridSize

                                setGridSize: (c: AgmMarkerCluster) => void;

                                  method setImageExtension

                                  setImageExtension: (c: AgmMarkerCluster) => void;

                                    method setImagePath

                                    setImagePath: (c: AgmMarkerCluster) => void;

                                      method setMaxZoom

                                      setMaxZoom: (c: AgmMarkerCluster) => void;

                                        method setMinimumClusterSize

                                        setMinimumClusterSize: (c: AgmMarkerCluster) => void;

                                          method setStyles

                                          setStyles: (c: AgmMarkerCluster) => void;

                                            method setZoomOnClick

                                            setZoomOnClick: (c: AgmMarkerCluster) => void;

                                              Package Files (4)

                                              Dependencies (1)

                                              Dev Dependencies (0)

                                              No dev dependencies.

                                              Peer Dependencies (3)


                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@agm/js-marker-clusterer.

                                              • Markdown
                                              • HTML
                                                <a href="https://www.jsdocs.io/package/@agm/js-marker-clusterer"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>