diff --git a/src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts b/src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts
index fae8904a9c3d..2a5ef6934385 100644
--- a/src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts
+++ b/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()">
@@ -274,6 +313,7 @@ class TestApp {
title?: string;
zIndex?: number;
zoomOnClick?: boolean;
+ options?: MarkerClustererOptions;
state = 'state1';
diff --git a/src/google-maps/map-marker-clusterer/map-marker-clusterer.ts b/src/google-maps/map-marker-clusterer/map-marker-clusterer.ts
index 67088b701032..2b89bb22bcd1 100644
--- a/src/google-maps/map-marker-clusterer/map-marker-clusterer.ts
+++ b/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,
};
}
diff --git a/src/google-maps/map-marker-clusterer/marker-clusterer-types.ts b/src/google-maps/map-marker-clusterer/marker-clusterer-types.ts
index b72a5437d7fb..ce6d61472fa0 100644
--- a/src/google-maps/map-marker-clusterer/marker-clusterer-types.ts
+++ b/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;
diff --git a/src/google-maps/testing/fake-google-map-utils.ts b/src/google-maps/testing/fake-google-map-utils.ts
index 020f4981ac61..88ffcc862bcb 100644
--- a/src/google-maps/testing/fake-google-map-utils.ts
+++ b/src/google-maps/testing/fake-google-map-utils.ts
@@ -433,9 +433,9 @@ export function createMarkerClustererSpy(): jasmine.SpyObj {
'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;
}
diff --git a/tools/public_api_guard/google-maps/google-maps.d.ts b/tools/public_api_guard/google-maps/google-maps.d.ts
index 2e967206e96a..97bd9879cf22 100644
--- a/tools/public_api_guard/google-maps/google-maps.d.ts
+++ b/tools/public_api_guard/google-maps/google-maps.d.ts
@@ -277,6 +277,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);
@@ -306,7 +307,7 @@ export declare class MapMarkerClusterer implements OnInit, AfterContentInit, OnC
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
ngOnInit(): void;
- static ɵcmp: i0.ɵɵComponentDefWithMeta;
+ static ɵcmp: i0.ɵɵComponentDefWithMeta;
static ɵfac: i0.ɵɵFactoryDef;
}