fix(google-maps): allow different anchor objects for info window (#19378)

Currently the info window is limited only to markers, but the API allows for any kind of `MVCObject`. These changes expand the type so that we can make it more flexible in the future.

Author: crisbeto

src/google-maps/map-anchor-point.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
+/// <reference types="googlemaps" />
+
+export interface MapAnchorPoint {
+  getAnchor(): google.maps.MVCObject;
+}

src/google-maps/map-info-window/map-info-window.spec.ts

@@ -110,7 +110,10 @@ describe('MapInfoWindow', () => {
 
   it('exposes methods that change the configuration of the info window', () => {
     const fakeMarker = {} as unknown as google.maps.Marker;
-    const fakeMarkerComponent = {marker: fakeMarker} as unknown as MapMarker;
+    const fakeMarkerComponent = {
+      marker: fakeMarker,
+      getAnchor: () => fakeMarker
+    } as unknown as MapMarker;
     const infoWindowSpy = createInfoWindowSpy({});
     createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
 

src/google-maps/map-info-window/map-info-window.ts

@@ -23,7 +23,7 @@ import {map, take, takeUntil} from 'rxjs/operators';
 
 import {GoogleMap} from '../google-map/google-map';
 import {MapEventManager} from '../map-event-manager';
-import {MapMarker} from '../map-marker/map-marker';
+import {MapAnchorPoint} from '../map-anchor-point';
 
 /**
  * Angular component that renders a Google Maps info window via the Google Maps JavaScript API.
@@ -167,14 +167,13 @@ export class MapInfoWindow implements OnInit, OnDestroy {
   }
 
   /**
-   * Opens the MapInfoWindow using the provided MapMarker as the anchor. If the anchor is not set,
+   * Opens the MapInfoWindow using the provided anchor. If the anchor is not set,
    * then the position property of the options input is used instead.
    */
-  open(anchor?: MapMarker) {
+  open(anchor?: MapAnchorPoint) {
     this._assertInitialized();
-    const marker = anchor ? anchor.marker : undefined;
     this._elementRef.nativeElement.style.display = '';
-    this.infoWindow.open(this._googleMap.googleMap, marker);
+    this.infoWindow.open(this._googleMap.googleMap, anchor ? anchor.getAnchor() : undefined);
   }
 
   private _combineOptions(): Observable<google.maps.InfoWindowOptions> {

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

@@ -24,6 +24,7 @@ import {map, take, takeUntil} from 'rxjs/operators';
 
 import {GoogleMap} from '../google-map/google-map';
 import {MapEventManager} from '../map-event-manager';
+import {MapAnchorPoint} from '../map-anchor-point';
 
 /**
  * Default options for the Google Maps marker component. Displays a marker
@@ -44,7 +45,7 @@ export const DEFAULT_MARKER_OPTIONS = {
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MapMarker implements OnInit, OnDestroy {
+export class MapMarker implements OnInit, OnDestroy, MapAnchorPoint {
   private _eventManager = new MapEventManager(this._ngZone);
   private readonly _options =
       new BehaviorSubject<google.maps.MarkerOptions>(DEFAULT_MARKER_OPTIONS);
@@ -384,6 +385,12 @@ export class MapMarker implements OnInit, OnDestroy {
     return this.marker.getZIndex() || null;
   }
 
+  /** Gets the anchor point that can be used to attach other Google Maps objects. */
+  getAnchor(): google.maps.MVCObject {
+    this._assertInitialized();
+    return this.marker;
+  }
+
   private _combineOptions(): Observable<google.maps.MarkerOptions> {
     return combineLatest([this._options, this._title, this._position, this._label, this._clickable])
         .pipe(map(([options, title, position, label, clickable]) => {

src/google-maps/public-api.ts

@@ -15,3 +15,4 @@ export {MapMarker} from './map-marker/map-marker';
 export {MapPolygon} from './map-polygon/map-polygon';
 export {MapPolyline} from './map-polyline/map-polyline';
 export {MapRectangle} from './map-rectangle/map-rectangle';
+export {MapAnchorPoint} from './map-anchor-point';

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

@@ -56,6 +56,10 @@ export declare class GoogleMapsModule {
     static ɵmod: i0.ɵɵNgModuleDefWithMeta<GoogleMapsModule, [typeof i1.GoogleMap, typeof i2.MapCircle, typeof i3.MapGroundOverlay, typeof i4.MapInfoWindow, typeof i5.MapMarker, typeof i6.MapPolygon, typeof i7.MapPolyline, typeof i8.MapRectangle], never, [typeof i1.GoogleMap, typeof i2.MapCircle, typeof i3.MapGroundOverlay, typeof i4.MapInfoWindow, typeof i5.MapMarker, typeof i6.MapPolygon, typeof i7.MapPolyline, typeof i8.MapRectangle]>;
 }
 
+export interface MapAnchorPoint {
+    getAnchor(): google.maps.MVCObject;
+}
+
 export declare class MapCircle implements OnInit, OnDestroy {
     set center(center: google.maps.LatLng | google.maps.LatLngLiteral);
     centerChanged: Observable<void>;
@@ -121,12 +125,12 @@ export declare class MapInfoWindow implements OnInit, OnDestroy {
     getZIndex(): number;
     ngOnDestroy(): void;
     ngOnInit(): void;
-    open(anchor?: MapMarker): void;
+    open(anchor?: MapAnchorPoint): void;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<MapInfoWindow, "map-info-window", never, { "options": "options"; "position": "position"; }, { "closeclick": "closeclick"; "contentChanged": "contentChanged"; "domready": "domready"; "positionChanged": "positionChanged"; "zindexChanged": "zindexChanged"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<MapInfoWindow, never>;
 }
 
-export declare class MapMarker implements OnInit, OnDestroy {
+export declare class MapMarker implements OnInit, OnDestroy, MapAnchorPoint {
     animationChanged: Observable<void>;
     set clickable(clickable: boolean);
     clickableChanged: Observable<void>;
@@ -155,6 +159,7 @@ export declare class MapMarker implements OnInit, OnDestroy {
     visibleChanged: Observable<void>;
     zindexChanged: Observable<void>;
     constructor(_googleMap: GoogleMap, _ngZone: NgZone);
+    getAnchor(): google.maps.MVCObject;
     getAnimation(): google.maps.Animation | null;
     getClickable(): boolean;
     getCursor(): string | null;