fix(google-maps): make info window open method compatible with advanced marker

Currently the info window has two methods: one for any `MapAnchorPoint` and one for an advanced marker. These changes deprecate the latter and make the former compatible with advanced markers.

Author: crisbeto

src/dev-app/google-map/google-map-demo.html

@@ -8,38 +8,39 @@
                 (mapClick)="handleClick($event)"
                 (mapMousemove)="handleMove($event)"
                 (mapRightclick)="handleRightclick()"
-                [mapTypeId]="mapTypeId">
+                [mapTypeId]="mapTypeId"
+                [mapId]="mapId">
       <map-marker-clusterer [imagePath]="markerClustererImagePath">
         <map-marker #firstMarker="mapMarker"
                     [position]="center"
-                    (mapClick)="clickMarker(firstMarker)"></map-marker>
+                    (mapClick)="infoWindow.open(firstMarker)"></map-marker>
         @for (markerPosition of markerPositions; track markerPosition) {
           <map-marker #marker="mapMarker"
             [position]="markerPosition"
             [options]="markerOptions"
-            (mapClick)="clickMarker(marker)"></map-marker>
+            (mapClick)="infoWindow.open(marker)"></map-marker>
         }
       </map-marker-clusterer>
       @if (hasAdvancedMarker) {
         <map-advanced-marker
           #secondMarker="mapAdvancedMarker"
-          (mapClick)="clickAdvancedMarker(secondMarker)"
+          (mapClick)="infoWindow.open(secondMarker)"
           title="Advanced Marker"
           [gmpDraggable]="false"
-          [content]="advancedMarkerContent"
+          [content]="hasAdvancedMarkerCustomContent ? advancedMarkerContent : null"
           [position]="mapAdvancedMarkerPosition">
 
           <svg #advancedMarkerContent fill="oklch(69.02% .277 332.77)" viewBox="0 0 960 960" width="50px" height="50px" xml:space="preserve">
             <g>
-              <polygon points="562.6,109.8 804.1,629.5 829.2,233.1 	"/>
-              <polygon points="624.9,655.9 334.3,655.9 297.2,745.8 479.6,849.8 662,745.8 	"/>
-              <polygon points="384.1,539.3 575.2,539.3 479.6,307 	"/>
-              <polygon points="396.6,109.8 130,233.1 155.1,629.5 	"/>
+              <polygon points="562.6,109.8 804.1,629.5 829.2,233.1"/>
+              <polygon points="624.9,655.9 334.3,655.9 297.2,745.8 479.6,849.8 662,745.8"/>
+              <polygon points="384.1,539.3 575.2,539.3 479.6,307"/>
+              <polygon points="396.6,109.8 130,233.1 155.1,629.5"/>
             </g>
           </svg>
         </map-advanced-marker>
       }
-      <map-info-window>Testing 1 2 3</map-info-window>
+      <map-info-window #infoWindow="mapInfoWindow">Testing 1 2 3</map-info-window>
       @if (isPolylineDisplayed) {
         <map-polyline [options]="polylineOptions"></map-polyline>
       }
@@ -213,6 +214,13 @@
       </label>
     </div>
 
+    <div>
+      <label>
+        Toggle custom content for Advanced Marker
+        <input type="checkbox" (click)="toggleAdvancedMarkerCustomContent()">
+      </label>
+    </div>
+
     <div>
       <button mat-button (click)="calculateDirections()">
         Calculate directions between first two markers

src/dev-app/google-map/google-map-demo.ts

@@ -82,7 +82,6 @@ let apiLoadingPromise: Promise<unknown> | null = null;
   ],
 })
 export class GoogleMapDemo {
-  @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;
   @ViewChild(MapPolyline) polyline: MapPolyline;
   @ViewChild(MapPolygon) polygon: MapPolygon;
   @ViewChild(MapRectangle) rectangle: MapRectangle;
@@ -146,6 +145,9 @@ export class GoogleMapDemo {
   isTransitLayerDisplayed = false;
   isBicyclingLayerDisplayed = false;
   hasAdvancedMarker = false;
+  hasAdvancedMarkerCustomContent = true;
+  // This is necessary for testing advanced markers. It seems like any value works locally.
+  mapId = '123';
 
   mapTypeId: google.maps.MapTypeId;
   mapTypeIds = ['hybrid', 'roadmap', 'satellite', 'terrain'] as google.maps.MapTypeId[];
@@ -173,17 +175,6 @@ export class GoogleMapDemo {
     this.display = event.latLng?.toJSON();
   }
 
-  clickMarker(marker: MapMarker) {
-    this.infoWindow.open(marker);
-  }
-
-  clickAdvancedMarker(advancedMarker: MapAdvancedMarker) {
-    this.infoWindow.openAdvancedMarkerElement(
-      advancedMarker.advancedMarker,
-      advancedMarker.advancedMarker.title,
-    );
-  }
-
   handleRightclick() {
     this.markerPositions.pop();
   }
@@ -269,6 +260,10 @@ export class GoogleMapDemo {
     this.hasAdvancedMarker = !this.hasAdvancedMarker;
   }
 
+  toggleAdvancedMarkerCustomContent() {
+    this.hasAdvancedMarkerCustomContent = !this.hasAdvancedMarkerCustomContent;
+  }
+
   calculateDirections() {
     if (this.markerPositions.length >= 2) {
       const request: google.maps.DirectionsRequest = {

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

@@ -25,6 +25,7 @@ import {
 import {GoogleMap} from '../google-map/google-map';
 import {MapEventManager} from '../map-event-manager';
 import {Observable} from 'rxjs';
+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 = {
   exportAs: 'mapAdvancedMarker',
   standalone: true,
 })
-export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy {
+export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
   private _eventManager = new MapEventManager(inject(NgZone));
 
   /**
@@ -80,10 +81,10 @@ export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy {
    * See: https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.content
    */
   @Input()
-  set content(content: Node | google.maps.marker.PinElement) {
+  set content(content: Node | google.maps.marker.PinElement | null) {
     this._content = content;
   }
-  private _content: Node;
+  private _content: Node | null;
 
   /**
    * If true, the AdvancedMarkerElement can be dragged.
@@ -231,6 +232,11 @@ export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  getAnchor(): google.maps.marker.AdvancedMarkerElement {
+    this._assertInitialized();
+    return this.advancedMarker;
+  }
+
   /** Creates a combined options object using the passed-in options and the individual inputs. */
   private _combineOptions(): google.maps.marker.AdvancedMarkerElementOptions {
     const options = this._options || DEFAULT_MARKER_OPTIONS;

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

@@ -10,5 +10,5 @@
 /// <reference types="google.maps" />
 
 export interface MapAnchorPoint {
-  getAnchor(): google.maps.MVCObject;
+  getAnchor(): google.maps.MVCObject | google.maps.marker.AdvancedMarkerElement;
 }

src/google-maps/map-info-window/README.md

@@ -36,14 +36,17 @@ export class GoogleMapDemo {
 
 ```html
 <!-- google-maps-demo.component.html -->
-<google-map 
+<google-map
   height="400px"
   width="750px"
   [center]="center"
   [zoom]="zoom"
   (mapClick)="addMarker($event)">
     @for (position of markerPositions; track position) {
-      <map-marker #marker="mapMarker" [position]="position" (mapClick)="openInfoWindow(marker)" />
+      <map-advanced-marker
+        #marker="mapMarker"
+        [position]="position"
+        (mapClick)="openInfoWindow(marker)" />
     }
     <map-info-window>Info Window content</map-info-window>
 </google-map>

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

@@ -195,29 +195,36 @@ export class MapInfoWindow implements OnInit, OnDestroy {
 
   /**
    * Opens the MapInfoWindow using the provided AdvancedMarkerElement.
+   * @deprecated Use the `open` method instead.
+   * @breaking-change 20.0.0
    */
   openAdvancedMarkerElement(
     advancedMarkerElement: google.maps.marker.AdvancedMarkerElement,
     content?: string | Element | Text,
   ): void {
-    this._assertInitialized();
-    if (!advancedMarkerElement) {
-      return;
-    }
-
-    this.infoWindow.close();
-    if (content) {
-      this.infoWindow.setContent(content);
-    }
-    this.infoWindow.open(this._googleMap.googleMap, advancedMarkerElement);
+    this.open(
+      {
+        getAnchor: () => advancedMarkerElement,
+      },
+      undefined,
+      content,
+    );
   }
 
   /**
    * 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?: MapAnchorPoint, shouldFocus?: boolean) {
+  open(anchor?: MapAnchorPoint, shouldFocus?: boolean, content?: string | Element | Text): void {
     this._assertInitialized();
+
+    if ((typeof ngDevMode === 'undefined' || ngDevMode) && anchor && !anchor.getAnchor) {
+      throw new Error(
+        'Specified anchor does not implement the `getAnchor` method. ' +
+          'It cannot be used to open an info window.',
+      );
+    }
+
     const anchorObject = anchor ? anchor.getAnchor() : undefined;
 
     // Prevent the info window from initializing when trying to reopen on the same anchor.
@@ -226,6 +233,9 @@ export class MapInfoWindow implements OnInit, OnDestroy {
     // case where the window doesn't have an anchor, but is placed at a particular position.
     if (this.infoWindow.get('anchor') !== anchorObject || !anchorObject) {
       this._elementRef.nativeElement.style.display = '';
+      if (content) {
+        this.infoWindow.setContent(content);
+      }
       this.infoWindow.open({
         map: this._googleMap.googleMap,
         anchor: anchorObject,

src/google-maps/map-marker/README.md

@@ -2,6 +2,8 @@
 
 The `MapMarker` component wraps the [`google.maps.Marker` class](https://developers.google.com/maps/documentation/javascript/reference/marker#Marker) from the Google Maps JavaScript API. The `MapMarker` component displays a marker on the map when it is a content child of a `GoogleMap` component. Like `GoogleMap`, this component offers an `options` input as well as convenience inputs for `position`, `title`, `label`, and `clickable`, and supports all `google.maps.Marker` events as outputs.
 
+**Note:** As of 2024, Google Maps has deprecated the `Marker` class. Consider using the `map-advanced-marker` instead.
+
 ## Example
 
 ```typescript
@@ -29,7 +31,7 @@ export class GoogleMapDemo {
 
 ```html
 <!-- google-map-demo.component.html -->
-<google-map 
+<google-map
   height="400px"
   width="750px"
   [center]="center"

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -585,8 +585,9 @@ <h2>YouTube player</h2>
 
 <h2>Google Map</h2>
 <!-- position: relative prevents the "Map failed to load" element from leaving the container -->
-<google-map height="400px" width="750px" style="position: relative">
+<google-map height="400px" width="750px" mapId="123" style="position: relative">
   <map-marker [position]="{lat: 24, lng: 12}"></map-marker>
+  <map-advanced-marker [position]="{lat: 12, lng: 12}"></map-advanced-marker>
   <map-info-window>Hello</map-info-window>
   <map-polyline
     [options]="{

src/universal-app/kitchen-sink/kitchen-sink.ts

@@ -22,6 +22,7 @@ import {
   MapRectangle,
   MapTrafficLayer,
   MapTransitLayer,
+  MapAdvancedMarker,
 } from '@angular/google-maps';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatBadgeModule} from '@angular/material/badge';
@@ -196,6 +197,7 @@ export class TestEntryComponent {}
     MapInfoWindow,
     MapKmlLayer,
     MapMarker,
+    MapAdvancedMarker,
     MapMarkerClusterer,
     MapPolygon,
     MapPolyline,

tools/public_api_guard/google-maps/google-maps.md

@@ -135,10 +135,12 @@ export class GoogleMapsModule {
 export type HeatmapData = google.maps.MVCArray<google.maps.LatLng | google.maps.visualization.WeightedLocation | google.maps.LatLngLiteral> | (google.maps.LatLng | google.maps.visualization.WeightedLocation | google.maps.LatLngLiteral)[];
 
 // @public
-export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy {
+export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
     constructor(_googleMap: GoogleMap, _ngZone: NgZone);
     advancedMarker: google.maps.marker.AdvancedMarkerElement;
-    set content(content: Node | google.maps.marker.PinElement);
+    set content(content: Node | google.maps.marker.PinElement | null);
+    // (undocumented)
+    getAnchor(): google.maps.marker.AdvancedMarkerElement;
     set gmpDraggable(draggable: boolean);
     readonly mapClick: Observable<google.maps.MapMouseEvent>;
     readonly mapDrag: Observable<google.maps.MapMouseEvent>;
@@ -164,7 +166,7 @@ export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy {
 // @public
 export interface MapAnchorPoint {
     // (undocumented)
-    getAnchor(): google.maps.MVCObject;
+    getAnchor(): google.maps.MVCObject | google.maps.marker.AdvancedMarkerElement;
 }
 
 // @public (undocumented)
@@ -391,7 +393,8 @@ export class MapInfoWindow implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
-    open(anchor?: MapAnchorPoint, shouldFocus?: boolean): void;
+    open(anchor?: MapAnchorPoint, shouldFocus?: boolean, content?: string | Element | Text): void;
+    // @deprecated
     openAdvancedMarkerElement(advancedMarkerElement: google.maps.marker.AdvancedMarkerElement, content?: string | Element | Text): void;
     // (undocumented)
     set options(options: google.maps.InfoWindowOptions);