feat(google-maps): support options object on marker clusterer (#21861)

Adds support for an `options` input to the marker clusterer, similar to the other Google
Maps directives.

Fixes #21763.

Author: crisbeto

src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts

@@ -116,6 +116,44 @@ describe('MapMarkerClusterer', () => {
     });
   });
 
+  it('sets marker clusterer options', () => {
+    fixture.detectChanges();
+    const options: MarkerClustererOptions = {
+      enableRetinaIcons: true,
+      gridSize: 1337,
+      ignoreHidden: true,
+      imageExtension: 'png'
+    };
+    fixture.componentInstance.options = options;
+    fixture.detectChanges();
+    expect(markerClustererSpy.setOptions).toHaveBeenCalledWith(jasmine.objectContaining(options));
+  });
+
+  it('gives precedence to specific inputs over options', () => {
+    fixture.detectChanges();
+    const options: MarkerClustererOptions = {
+      enableRetinaIcons: true,
+      gridSize: 1337,
+      ignoreHidden: true,
+      imageExtension: 'png'
+    };
+    const expectedOptions: MarkerClustererOptions = {
+      enableRetinaIcons: false,
+      gridSize: 42,
+      ignoreHidden: false,
+      imageExtension: 'jpeg'
+    };
+    fixture.componentInstance.enableRetinaIcons = expectedOptions.enableRetinaIcons;
+    fixture.componentInstance.gridSize = expectedOptions.gridSize;
+    fixture.componentInstance.ignoreHidden = expectedOptions.ignoreHidden;
+    fixture.componentInstance.imageExtension = expectedOptions.imageExtension;
+    fixture.componentInstance.options = options;
+    fixture.detectChanges();
+
+    expect(markerClustererSpy.setOptions)
+        .toHaveBeenCalledWith(jasmine.objectContaining(expectedOptions));
+  });
+
   it('sets Google Maps Markers in the MarkerClusterer', () => {
     fixture.detectChanges();
 
@@ -246,6 +284,7 @@ describe('MapMarkerClusterer', () => {
                                      [title]="title"
                                      [zIndex]="zIndex"
                                      [zoomOnClick]="zoomOnClick"
+                                     [options]="options"
                                      (clusteringbegin)="onClusteringBegin()">
                  <map-marker *ngIf="state === 'state1'"></map-marker>
                  <map-marker *ngIf="state === 'state1' || state === 'state2'"></map-marker>
@@ -274,6 +313,7 @@ class TestApp {
   title?: string;
   zIndex?: number;
   zoomOnClick?: boolean;
+  options?: MarkerClustererOptions;
 
   state = 'state1';
 

src/google-maps/map-marker-clusterer/map-marker-clusterer.ts

@@ -32,6 +32,9 @@ import {GoogleMap} from '../google-map/google-map';
 import {MapEventManager} from '../map-event-manager';
 import {MapMarker} from '../map-marker/map-marker';
 
+/** Default options for a clusterer. */
+const DEFAULT_CLUSTERER_OPTIONS: MarkerClustererOptions = {};
+
 /**
  * Angular component for implementing a Google Maps Marker Clusterer.
  *
@@ -153,6 +156,12 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
   }
   private _zoomOnClick: boolean;
 
+  @Input()
+  set options(options: MarkerClustererOptions) {
+    this._options = options;
+  }
+  private _options: MarkerClustererOptions;
+
   /**
    * See
    * googlemaps.github.io/v3-utility-library/modules/
@@ -212,6 +221,9 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
     } = this;
 
     if (clusterer) {
+      if (changes['options']) {
+        clusterer.setOptions(this._combineOptions());
+      }
       if (changes['ariaLabelFn']) {
         clusterer.ariaLabelFn = ariaLabelFn;
       }
@@ -376,25 +388,27 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
   }
 
   private _combineOptions(): MarkerClustererOptions {
+    const options = this._options || DEFAULT_CLUSTERER_OPTIONS;
     return {
-      ariaLabelFn: this.ariaLabelFn,
-      averageCenter: this._averageCenter,
-      batchSize: this.batchSize,
-      batchSizeIE: this._batchSizeIE,
-      calculator: this._calculator,
-      clusterClass: this._clusterClass,
-      enableRetinaIcons: this._enableRetinaIcons,
-      gridSize: this._gridSize,
-      ignoreHidden: this._ignoreHidden,
-      imageExtension: this._imageExtension,
-      imagePath: this._imagePath,
-      imageSizes: this._imageSizes,
-      maxZoom: this._maxZoom,
-      minimumClusterSize: this._minimumClusterSize,
-      styles: this._styles,
-      title: this._title,
-      zIndex: this._zIndex,
-      zoomOnClick: this._zoomOnClick,
+      ...options,
+      ariaLabelFn: this.ariaLabelFn ?? options.ariaLabelFn,
+      averageCenter: this._averageCenter ?? options.averageCenter,
+      batchSize: this.batchSize ?? options.batchSize,
+      batchSizeIE: this._batchSizeIE ?? options.batchSizeIE,
+      calculator: this._calculator ?? options.calculator,
+      clusterClass: this._clusterClass ?? options.clusterClass,
+      enableRetinaIcons: this._enableRetinaIcons ?? options.enableRetinaIcons,
+      gridSize: this._gridSize ?? options.gridSize,
+      ignoreHidden: this._ignoreHidden ?? options.ignoreHidden,
+      imageExtension: this._imageExtension ?? options.imageExtension,
+      imagePath: this._imagePath ?? options.imagePath,
+      imageSizes: this._imageSizes ?? options.imageSizes,
+      maxZoom: this._maxZoom ?? options.maxZoom,
+      minimumClusterSize: this._minimumClusterSize ?? options.minimumClusterSize,
+      styles: this._styles ?? options.styles,
+      title: this._title ?? options.title,
+      zIndex: this._zIndex ?? options.zIndex,
+      zoomOnClick: this._zoomOnClick ?? options.zoomOnClick,
     };
   }
 

src/google-maps/map-marker-clusterer/marker-clusterer-types.ts

@@ -77,6 +77,8 @@ declare class MarkerClusterer {
   setValues(values: any): void;
   setZIndex(zIndex: number): void;
   setZoomOnClick(zoomOnClick: boolean): void;
+  // Note: This one doesn't appear in the docs page, but it exists at runtime.
+  setOptions(options: MarkerClustererOptions): void;
   unbind(key: string): void;
   unbindAll(): void;
   static CALCULATOR(markers: google.maps.Marker[], numStyles: number): ClusterIconInfo;

src/google-maps/testing/fake-google-map-utils.ts

@@ -434,9 +434,9 @@ export function createMarkerClustererSpy(): jasmine.SpyObj<MarkerClusterer> {
     'setCalculator', 'setClusterClass', 'setEnableRetinaIcons', 'setGridSize',
     'setIgnoreHidden', 'setImageExtension', 'setImagePath', 'setImageSizes', 'setMap',
     'setMaxZoom', 'setMinimumClusterSize', 'setStyles', 'setTitle', 'setZIndex',
-    'setZoomOnClick',
+    'setZoomOnClick', 'setOptions',
   ]);
-  markerClustererSpy.addListener.and.returnValue({ remove: () => { } });
+  markerClustererSpy.addListener.and.returnValue({remove: () => {}});
   return markerClustererSpy;
 }
 

tools/public_api_guard/google-maps/google-maps.d.ts

@@ -294,6 +294,7 @@ export declare class MapMarkerClusterer implements OnInit, AfterContentInit, OnC
     markerClusterer?: MarkerClusterer;
     set maxZoom(maxZoom: number);
     set minimumClusterSize(minimumClusterSize: number);
+    set options(options: MarkerClustererOptions);
     set styles(styles: ClusterIconStyle[]);
     set title(title: string);
     set zIndex(zIndex: number);
@@ -323,7 +324,7 @@ export declare class MapMarkerClusterer implements OnInit, AfterContentInit, OnC
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MapMarkerClusterer, "map-marker-clusterer", ["mapMarkerClusterer"], { "ariaLabelFn": "ariaLabelFn"; "averageCenter": "averageCenter"; "batchSize": "batchSize"; "batchSizeIE": "batchSizeIE"; "calculator": "calculator"; "clusterClass": "clusterClass"; "enableRetinaIcons": "enableRetinaIcons"; "gridSize": "gridSize"; "ignoreHidden": "ignoreHidden"; "imageExtension": "imageExtension"; "imagePath": "imagePath"; "imageSizes": "imageSizes"; "maxZoom": "maxZoom"; "minimumClusterSize": "minimumClusterSize"; "styles": "styles"; "title": "title"; "zIndex": "zIndex"; "zoomOnClick": "zoomOnClick"; }, { "clusteringbegin": "clusteringbegin"; "clusteringend": "clusteringend"; }, ["_markers"], ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MapMarkerClusterer, "map-marker-clusterer", ["mapMarkerClusterer"], { "ariaLabelFn": "ariaLabelFn"; "averageCenter": "averageCenter"; "batchSize": "batchSize"; "batchSizeIE": "batchSizeIE"; "calculator": "calculator"; "clusterClass": "clusterClass"; "enableRetinaIcons": "enableRetinaIcons"; "gridSize": "gridSize"; "ignoreHidden": "ignoreHidden"; "imageExtension": "imageExtension"; "imagePath": "imagePath"; "imageSizes": "imageSizes"; "maxZoom": "maxZoom"; "minimumClusterSize": "minimumClusterSize"; "styles": "styles"; "title": "title"; "zIndex": "zIndex"; "zoomOnClick": "zoomOnClick"; "options": "options"; }, { "clusteringbegin": "clusteringbegin"; "clusteringend": "clusteringend"; }, ["_markers"], ["*"]>;
     static ɵfac: i0.ɵɵFactoryDef<MapMarkerClusterer, never>;
 }