diff --git a/src/dev-app/google-map/google-map-demo.html b/src/dev-app/google-map/google-map-demo.html index f157e6fa6146..e4961e0d43cc 100644 --- a/src/dev-app/google-map/google-map-demo.html +++ b/src/dev-app/google-map/google-map-demo.html @@ -10,7 +10,7 @@ (mapRightclick)="handleRightclick()" [mapTypeId]="mapTypeId" [mapId]="mapId"> - + @@ -20,7 +20,7 @@ [options]="markerOptions" (mapClick)="infoWindow.open(marker)"> } - + @if (hasAdvancedMarker) { | null = null; MapInfoWindow, MapKmlLayer, MapMarker, - MapMarkerClusterer, + DeprecatedMapMarkerClusterer, MapAdvancedMarker, MapPolygon, MapPolyline, diff --git a/src/google-maps/map-marker-clusterer/README.md b/src/google-maps/deprecated-map-marker-clusterer/README.md similarity index 53% rename from src/google-maps/map-marker-clusterer/README.md rename to src/google-maps/deprecated-map-marker-clusterer/README.md index 05f26e2c6e04..915a5dc810a4 100644 --- a/src/google-maps/map-marker-clusterer/README.md +++ b/src/google-maps/deprecated-map-marker-clusterer/README.md @@ -1,6 +1,9 @@ -#MapMarkerClusterer +# Deprecation warning ⚠️ +This component is based on the deprecated `@googlemaps/markerclustererplus` library. Use the `map-marker-clusterer` component instead. -The `MapMarkerClusterer` component wraps the [`MarkerClusterer` class](https://googlemaps.github.io/js-markerclustererplus/classes/markerclusterer.html) from the [Google Maps JavaScript MarkerClustererPlus Library](https://github.com/googlemaps/js-markerclustererplus). The `MapMarkerClusterer` component displays a cluster of markers that are children of the `` tag. Unlike the other Google Maps components, MapMarkerClusterer does not have an `options` input, so any input (listed in the [documentation](https://googlemaps.github.io/js-markerclustererplus/index.html) for the `MarkerClusterer` class) should be set directly. +## DeprecatedMapMarkerClusterer + +The `DeprecatedMapMarkerClusterer` component wraps the [`MarkerClusterer` class](https://googlemaps.github.io/js-markerclustererplus/classes/markerclusterer.html) from the [Google Maps JavaScript MarkerClustererPlus Library](https://github.com/googlemaps/js-markerclustererplus). The `DeprecatedMapMarkerClusterer` component displays a cluster of markers that are children of the `` tag. Unlike the other Google Maps components, MapMarkerClusterer does not have an `options` input, so any input (listed in the [documentation](https://googlemaps.github.io/js-markerclustererplus/index.html) for the `MarkerClusterer` class) should be set directly. ## Loading the Library @@ -17,13 +20,13 @@ Additional information can be found by looking at [Marker Clustering](https://de ```typescript // google-map-demo.component.ts import {Component} from '@angular/core'; -import {GoogleMap, MapMarker, MapMarkerClusterer} from '@angular/google-maps'; +import {GoogleMap, MapMarker, DeprecatedMapMarkerClusterer} from '@angular/google-maps'; @Component({ selector: 'google-map-demo', templateUrl: 'google-map-demo.html', standalone: true, - imports: [GoogleMap, MapMarker, MapMarkerClusterer], + imports: [GoogleMap, MapMarker, DeprecatedMapMarkerClusterer], }) export class GoogleMapDemo { center: google.maps.LatLngLiteral = {lat: 24, lng: 12}; @@ -40,16 +43,16 @@ export class GoogleMapDemo { ```html - - + @for (position of markerPositions; track position) { } - + ``` diff --git a/src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts b/src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.spec.ts similarity index 93% rename from src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts rename to src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.spec.ts index 132927ba0f06..9b1d297b9536 100644 --- a/src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts +++ b/src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.spec.ts @@ -6,21 +6,21 @@ import {MapMarker} from '../map-marker/map-marker'; import { createMapConstructorSpy, createMapSpy, - createMarkerClustererConstructorSpy, - createMarkerClustererSpy, + createDeprecatedMarkerClustererConstructorSpy, + createDeprecatedMarkerClustererSpy, createMarkerConstructorSpy, createMarkerSpy, } from '../testing/fake-google-map-utils'; -import {MapMarkerClusterer} from './map-marker-clusterer'; +import {DeprecatedMapMarkerClusterer} from './deprecated-map-marker-clusterer'; import { AriaLabelFn, Calculator, ClusterIconStyle, MarkerClusterer, MarkerClustererOptions, -} from './marker-clusterer-types'; +} from './deprecated-marker-clusterer-types'; -describe('MapMarkerClusterer', () => { +describe('DeprecatedMapMarkerClusterer', () => { let mapSpy: jasmine.SpyObj; let markerClustererSpy: jasmine.SpyObj; let markerClustererConstructorSpy: jasmine.Spy; @@ -39,8 +39,9 @@ describe('MapMarkerClusterer', () => { return createMarkerSpy({}); }); - markerClustererSpy = createMarkerClustererSpy(); - markerClustererConstructorSpy = createMarkerClustererConstructorSpy(markerClustererSpy); + markerClustererSpy = createDeprecatedMarkerClustererSpy(); + markerClustererConstructorSpy = + createDeprecatedMarkerClustererConstructorSpy(markerClustererSpy); fixture = TestBed.createComponent(TestApp); }); @@ -52,7 +53,10 @@ describe('MapMarkerClusterer', () => { it('throws an error if the clustering library has not been loaded', fakeAsync(() => { (window as any).MarkerClusterer = undefined; - markerClustererConstructorSpy = createMarkerClustererConstructorSpy(markerClustererSpy, false); + markerClustererConstructorSpy = createDeprecatedMarkerClustererConstructorSpy( + markerClustererSpy, + false, + ); expect(() => { fixture.detectChanges(); @@ -304,7 +308,7 @@ describe('MapMarkerClusterer', () => { selector: 'test-app', template: ` - { @if (state === 'state2') { } - + `, standalone: true, - imports: [GoogleMap, MapMarker, MapMarkerClusterer], + imports: [GoogleMap, MapMarker, DeprecatedMapMarkerClusterer], }) class TestApp { - @ViewChild(MapMarkerClusterer) markerClusterer: MapMarkerClusterer; + @ViewChild(DeprecatedMapMarkerClusterer) markerClusterer: DeprecatedMapMarkerClusterer; ariaLabelFn?: AriaLabelFn; averageCenter?: boolean; diff --git a/src/google-maps/map-marker-clusterer/map-marker-clusterer.ts b/src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.ts similarity index 97% rename from src/google-maps/map-marker-clusterer/map-marker-clusterer.ts rename to src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.ts index 20718b24c6f2..2cecf12f1182 100644 --- a/src/google-maps/map-marker-clusterer/map-marker-clusterer.ts +++ b/src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.ts @@ -39,7 +39,7 @@ import { ClusterIconStyle, MarkerClusterer as MarkerClustererInstance, MarkerClustererOptions, -} from './marker-clusterer-types'; +} from './deprecated-marker-clusterer-types'; /** Default options for a clusterer. */ const DEFAULT_CLUSTERER_OPTIONS: MarkerClustererOptions = {}; @@ -52,18 +52,24 @@ declare const MarkerClusterer: typeof MarkerClustererInstance; /** * Angular component for implementing a Google Maps Marker Clusterer. - * * See https://developers.google.com/maps/documentation/javascript/marker-clustering + * + * @deprecated This component is using a deprecated clustering implementation. Use the + * `map-marker-clusterer` component instead. + * @breaking-change 21.0.0 + * */ @Component({ - selector: 'map-marker-clusterer', + selector: 'deprecated-map-marker-clusterer', exportAs: 'mapMarkerClusterer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: '', encapsulation: ViewEncapsulation.None, }) -export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges, OnDestroy { +export class DeprecatedMapMarkerClusterer + implements OnInit, AfterContentInit, OnChanges, OnDestroy +{ private readonly _googleMap = inject(GoogleMap); private readonly _ngZone = inject(NgZone); private readonly _currentMarkers = new Set(); diff --git a/src/google-maps/map-marker-clusterer/marker-clusterer-types.ts b/src/google-maps/deprecated-map-marker-clusterer/deprecated-marker-clusterer-types.ts similarity index 100% rename from src/google-maps/map-marker-clusterer/marker-clusterer-types.ts rename to src/google-maps/deprecated-map-marker-clusterer/deprecated-marker-clusterer-types.ts diff --git a/src/google-maps/google-maps-module.ts b/src/google-maps/google-maps-module.ts index bd82f7eecc45..c373e61fd088 100644 --- a/src/google-maps/google-maps-module.ts +++ b/src/google-maps/google-maps-module.ts @@ -17,7 +17,7 @@ import {MapGroundOverlay} from './map-ground-overlay/map-ground-overlay'; import {MapInfoWindow} from './map-info-window/map-info-window'; import {MapKmlLayer} from './map-kml-layer/map-kml-layer'; import {MapMarker} from './map-marker/map-marker'; -import {MapMarkerClusterer} from './map-marker-clusterer/map-marker-clusterer'; +import {DeprecatedMapMarkerClusterer} from './deprecated-map-marker-clusterer/deprecated-map-marker-clusterer'; import {MapPolygon} from './map-polygon/map-polygon'; import {MapPolyline} from './map-polyline/map-polyline'; import {MapRectangle} from './map-rectangle/map-rectangle'; @@ -38,7 +38,7 @@ const COMPONENTS = [ MapKmlLayer, MapMarker, MapAdvancedMarker, - MapMarkerClusterer, + DeprecatedMapMarkerClusterer, MapPolygon, MapPolyline, MapRectangle, diff --git a/src/google-maps/public-api.ts b/src/google-maps/public-api.ts index ef7f2e3ff36c..b83f5cfd7587 100644 --- a/src/google-maps/public-api.ts +++ b/src/google-maps/public-api.ts @@ -22,7 +22,7 @@ export {MapInfoWindow} from './map-info-window/map-info-window'; export {MapKmlLayer} from './map-kml-layer/map-kml-layer'; export {MapMarker} from './map-marker/map-marker'; export {MapAdvancedMarker} from './map-advanced-marker/map-advanced-marker'; -export {MapMarkerClusterer} from './map-marker-clusterer/map-marker-clusterer'; +export {DeprecatedMapMarkerClusterer} from './deprecated-map-marker-clusterer/deprecated-map-marker-clusterer'; export {MapPolygon} from './map-polygon/map-polygon'; export {MapPolyline} from './map-polyline/map-polyline'; export {MapRectangle} from './map-rectangle/map-rectangle'; @@ -35,5 +35,5 @@ export { ClusterIconStyle, AriaLabelFn, Calculator, -} from './map-marker-clusterer/marker-clusterer-types'; +} from './deprecated-map-marker-clusterer/deprecated-marker-clusterer-types'; export {MapEventManager} from './map-event-manager'; diff --git a/src/google-maps/testing/fake-google-map-utils.ts b/src/google-maps/testing/fake-google-map-utils.ts index 0f7f59fbdf00..1e8f5f293798 100644 --- a/src/google-maps/testing/fake-google-map-utils.ts +++ b/src/google-maps/testing/fake-google-map-utils.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.dev/license */ -import {MarkerClusterer} from '../map-marker-clusterer/marker-clusterer-types'; +import {MarkerClusterer as DeprecatedMarkerClusterer} from '../deprecated-map-marker-clusterer/deprecated-marker-clusterer-types'; // The global `window` variable is typed as an intersection of `Window` and `globalThis`. // We re-declare `window` here and omit `globalThis` as it is typed with the actual Google @@ -574,8 +574,8 @@ export function createBicyclingLayerConstructorSpy( } /** Creates a jasmine.SpyObj for a MarkerClusterer */ -export function createMarkerClustererSpy(): jasmine.SpyObj { - const markerClustererSpy = jasmine.createSpyObj('MarkerClusterer', [ +export function createDeprecatedMarkerClustererSpy(): jasmine.SpyObj { + const deprecatedMarkerClustererSpy = jasmine.createSpyObj('DeprecatedMarkerClusterer', [ 'addListener', 'addMarkers', 'fitMapToMarkers', @@ -619,26 +619,26 @@ export function createMarkerClustererSpy(): jasmine.SpyObj { 'setZoomOnClick', 'setOptions', ]); - markerClustererSpy.addListener.and.returnValue({remove: () => {}}); - return markerClustererSpy; + deprecatedMarkerClustererSpy.addListener.and.returnValue({remove: () => {}}); + return deprecatedMarkerClustererSpy; } /** Creates a jasmine.Spy to watch for the constructor of a MarkerClusterer */ -export function createMarkerClustererConstructorSpy( - markerClustererSpy: jasmine.SpyObj, +export function createDeprecatedMarkerClustererConstructorSpy( + deprecatedMarkerClustererSpy: jasmine.SpyObj, apiLoaded = true, ): jasmine.Spy { // The spy target function cannot be an arrow-function as this breaks when created through `new`. - const markerClustererConstructorSpy = jasmine - .createSpy('MarkerClusterer constructor', function () { - return markerClustererSpy; + const deprecatedMarkerClustererConstructorSpy = jasmine + .createSpy('DeprecatedMarkerClusterer constructor', function () { + return deprecatedMarkerClustererSpy; }) .and.callThrough(); if (apiLoaded) { const testingWindow: TestingWindow = window; - testingWindow['MarkerClusterer'] = markerClustererConstructorSpy; + testingWindow['MarkerClusterer'] = deprecatedMarkerClustererConstructorSpy; } - return markerClustererConstructorSpy; + return deprecatedMarkerClustererConstructorSpy; } /** Creates a jasmine.SpyObj for DirectionsRenderer */ diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html index 793698ed6df2..52cfff367412 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.html +++ b/src/universal-app/kitchen-sink/kitchen-sink.html @@ -641,13 +641,13 @@

Google Map

]" > - - +

Popover edit

diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index ac0fefc5c8b7..a2e6893572a5 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -16,7 +16,7 @@ import { MapInfoWindow, MapKmlLayer, MapMarker, - MapMarkerClusterer, + DeprecatedMapMarkerClusterer, MapPolygon, MapPolyline, MapRectangle, @@ -198,7 +198,7 @@ export class TestEntryComponent {} MapKmlLayer, MapMarker, MapAdvancedMarker, - MapMarkerClusterer, + DeprecatedMapMarkerClusterer, MapPolygon, MapPolyline, MapRectangle, diff --git a/tools/public_api_guard/google-maps/google-maps.md b/tools/public_api_guard/google-maps/google-maps.md index a49299bbaa01..b65c4afdb221 100644 --- a/tools/public_api_guard/google-maps/google-maps.md +++ b/tools/public_api_guard/google-maps/google-maps.md @@ -55,6 +55,108 @@ export interface ClusterIconStyle { width: number; } +// @public @deprecated +export class DeprecatedMapMarkerClusterer implements OnInit, AfterContentInit, OnChanges, OnDestroy { + constructor(...args: unknown[]); + // (undocumented) + ariaLabelFn: AriaLabelFn; + // (undocumented) + set averageCenter(averageCenter: boolean); + // (undocumented) + batchSize?: number; + // (undocumented) + set batchSizeIE(batchSizeIE: number); + // (undocumented) + set calculator(calculator: Calculator); + // (undocumented) + set clusterClass(clusterClass: string); + readonly clusterClick: Observable; + readonly clusteringbegin: Observable; + readonly clusteringend: Observable; + // (undocumented) + set enableRetinaIcons(enableRetinaIcons: boolean); + // (undocumented) + fitMapToMarkers(padding: number | google.maps.Padding): void; + // (undocumented) + getAverageCenter(): boolean; + // (undocumented) + getBatchSizeIE(): number; + // (undocumented) + getCalculator(): Calculator; + // (undocumented) + getClusterClass(): string; + // (undocumented) + getClusters(): Cluster[]; + // (undocumented) + getEnableRetinaIcons(): boolean; + // (undocumented) + getGridSize(): number; + // (undocumented) + getIgnoreHidden(): boolean; + // (undocumented) + getImageExtension(): string; + // (undocumented) + getImagePath(): string; + // (undocumented) + getImageSizes(): number[]; + // (undocumented) + getMaxZoom(): number; + // (undocumented) + getMinimumClusterSize(): number; + // (undocumented) + getStyles(): ClusterIconStyle[]; + // (undocumented) + getTitle(): string; + // (undocumented) + getTotalClusters(): number; + // (undocumented) + getTotalMarkers(): number; + // (undocumented) + getZIndex(): number; + // (undocumented) + getZoomOnClick(): boolean; + // (undocumented) + set gridSize(gridSize: number); + // (undocumented) + set ignoreHidden(ignoreHidden: boolean); + // (undocumented) + set imageExtension(imageExtension: string); + // (undocumented) + set imagePath(imagePath: string); + // (undocumented) + set imageSizes(imageSizes: number[]); + markerClusterer?: MarkerClusterer; + readonly markerClustererInitialized: EventEmitter; + // (undocumented) + _markers: QueryList; + // (undocumented) + set maxZoom(maxZoom: number); + // (undocumented) + set minimumClusterSize(minimumClusterSize: number); + // (undocumented) + ngAfterContentInit(): void; + // (undocumented) + ngOnChanges(changes: SimpleChanges): void; + // (undocumented) + ngOnDestroy(): void; + // (undocumented) + ngOnInit(): void; + // (undocumented) + set options(options: MarkerClustererOptions); + // (undocumented) + set styles(styles: ClusterIconStyle[]); + // (undocumented) + set title(title: string); + // (undocumented) + set zIndex(zIndex: number); + // (undocumented) + set zoomOnClick(zoomOnClick: boolean); + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + // @public export class GoogleMap implements OnChanges, OnInit, OnDestroy { constructor(...args: unknown[]); @@ -127,7 +229,7 @@ export class GoogleMapsModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public @@ -498,108 +600,6 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint { static ɵfac: i0.ɵɵFactoryDeclaration; } -// @public -export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges, OnDestroy { - constructor(...args: unknown[]); - // (undocumented) - ariaLabelFn: AriaLabelFn; - // (undocumented) - set averageCenter(averageCenter: boolean); - // (undocumented) - batchSize?: number; - // (undocumented) - set batchSizeIE(batchSizeIE: number); - // (undocumented) - set calculator(calculator: Calculator); - // (undocumented) - set clusterClass(clusterClass: string); - readonly clusterClick: Observable; - readonly clusteringbegin: Observable; - readonly clusteringend: Observable; - // (undocumented) - set enableRetinaIcons(enableRetinaIcons: boolean); - // (undocumented) - fitMapToMarkers(padding: number | google.maps.Padding): void; - // (undocumented) - getAverageCenter(): boolean; - // (undocumented) - getBatchSizeIE(): number; - // (undocumented) - getCalculator(): Calculator; - // (undocumented) - getClusterClass(): string; - // (undocumented) - getClusters(): Cluster[]; - // (undocumented) - getEnableRetinaIcons(): boolean; - // (undocumented) - getGridSize(): number; - // (undocumented) - getIgnoreHidden(): boolean; - // (undocumented) - getImageExtension(): string; - // (undocumented) - getImagePath(): string; - // (undocumented) - getImageSizes(): number[]; - // (undocumented) - getMaxZoom(): number; - // (undocumented) - getMinimumClusterSize(): number; - // (undocumented) - getStyles(): ClusterIconStyle[]; - // (undocumented) - getTitle(): string; - // (undocumented) - getTotalClusters(): number; - // (undocumented) - getTotalMarkers(): number; - // (undocumented) - getZIndex(): number; - // (undocumented) - getZoomOnClick(): boolean; - // (undocumented) - set gridSize(gridSize: number); - // (undocumented) - set ignoreHidden(ignoreHidden: boolean); - // (undocumented) - set imageExtension(imageExtension: string); - // (undocumented) - set imagePath(imagePath: string); - // (undocumented) - set imageSizes(imageSizes: number[]); - markerClusterer?: MarkerClusterer; - readonly markerClustererInitialized: EventEmitter; - // (undocumented) - _markers: QueryList; - // (undocumented) - set maxZoom(maxZoom: number); - // (undocumented) - set minimumClusterSize(minimumClusterSize: number); - // (undocumented) - ngAfterContentInit(): void; - // (undocumented) - ngOnChanges(changes: SimpleChanges): void; - // (undocumented) - ngOnDestroy(): void; - // (undocumented) - ngOnInit(): void; - // (undocumented) - set options(options: MarkerClustererOptions); - // (undocumented) - set styles(styles: ClusterIconStyle[]); - // (undocumented) - set title(title: string); - // (undocumented) - set zIndex(zIndex: number); - // (undocumented) - set zoomOnClick(zoomOnClick: boolean); - // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; - // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration; -} - // @public export class MapPolygon implements OnInit, OnDestroy { constructor(...args: unknown[]);