Fixes for the advanced Google Maps marker

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

@@ -20,13 +20,25 @@
             (mapClick)="clickMarker(marker)"></map-marker>
         }
       </map-marker-clusterer>
-      <map-advanced-marker
-        #secondMarker="mapAdvancedMarker"
-        (mapClick)="clickAdvancedMarker(secondMarker)"
-        title="Advanced Marker"
-        [gmpDraggable]="false"
-        [position]="mapAdvancedMarkerPosition"
-      ></map-advanced-marker>
+      @if (hasAdvancedMarker) {
+        <map-advanced-marker
+          #secondMarker="mapAdvancedMarker"
+          (mapClick)="clickAdvancedMarker(secondMarker)"
+          title="Advanced Marker"
+          [gmpDraggable]="false"
+          [content]="advancedMarkerContent"
+          [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 	"/>
+            </g>
+          </svg>
+        </map-advanced-marker>
+      }
       <map-info-window>Testing 1 2 3</map-info-window>
       @if (isPolylineDisplayed) {
         <map-polyline [options]="polylineOptions"></map-polyline>
@@ -194,6 +206,13 @@
       </label>
     </div>
 
+    <div>
+      <label>
+        Toggle Advanced Marker
+        <input type="checkbox" (click)="toggleAdvancedMarker()">
+      </label>
+    </div>
+
     <div>
       <button mat-button (click)="calculateDirections()">
         Calculate directions between first two markers

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

@@ -89,7 +89,7 @@ export class GoogleMapDemo {
   @ViewChild(MapCircle) circle: MapCircle;
 
   center = {lat: 24, lng: 12};
-  mapAdvancedMarkerPosition = {lat: 24, lng: 16};
+  mapAdvancedMarkerPosition = {lat: 22, lng: 21};
   markerOptions = {draggable: false};
   markerPositions: google.maps.LatLngLiteral[] = [];
   zoom = 4;
@@ -145,6 +145,7 @@ export class GoogleMapDemo {
   isTrafficLayerDisplayed = false;
   isTransitLayerDisplayed = false;
   isBicyclingLayerDisplayed = false;
+  hasAdvancedMarker = false;
 
   mapTypeId: google.maps.MapTypeId;
   mapTypeIds = ['hybrid', 'roadmap', 'satellite', 'terrain'] as google.maps.MapTypeId[];
@@ -264,6 +265,10 @@ export class GoogleMapDemo {
     this.isBicyclingLayerDisplayed = !this.isBicyclingLayerDisplayed;
   }
 
+  toggleAdvancedMarker() {
+    this.hasAdvancedMarker = !this.hasAdvancedMarker;
+  }
+
   calculateDirections() {
     if (this.markerPositions.length >= 2) {
       const request: google.maps.DirectionsRequest = {

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

@@ -52,7 +52,10 @@ describe('GoogleMap', () => {
     const container = fixture.debugElement.query(By.css('div'))!;
     expect(container.nativeElement.style.height).toBe(DEFAULT_HEIGHT);
     expect(container.nativeElement.style.width).toBe(DEFAULT_WIDTH);
-    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, DEFAULT_OPTIONS);
+    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, {
+      ...DEFAULT_OPTIONS,
+      mapId: undefined,
+    });
   });
 
   it('sets height and width of the map', () => {
@@ -67,7 +70,10 @@ describe('GoogleMap', () => {
     const container = fixture.debugElement.query(By.css('div'))!;
     expect(container.nativeElement.style.height).toBe('750px');
     expect(container.nativeElement.style.width).toBe('400px');
-    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, DEFAULT_OPTIONS);
+    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, {
+      ...DEFAULT_OPTIONS,
+      mapId: undefined,
+    });
 
     fixture.componentInstance.height = '650px';
     fixture.componentInstance.width = '350px';
@@ -118,6 +124,7 @@ describe('GoogleMap', () => {
       center: {lat: 3, lng: 5},
       zoom: 7,
       mapTypeId: DEFAULT_OPTIONS.mapTypeId,
+      mapId: undefined,
     };
     mapSpy = createMapSpy(options);
     mapConstructorSpy = createMapConstructorSpy(mapSpy);
@@ -344,6 +351,20 @@ describe('GoogleMap', () => {
     expect(mapSpy.setMapTypeId).toHaveBeenCalledWith('roadmap');
   });
 
+  it('should set the map ID', () => {
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    mapConstructorSpy = createMapConstructorSpy(mapSpy);
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.mapId = '123';
+    fixture.detectChanges();
+
+    expect(mapConstructorSpy).toHaveBeenCalledWith(
+      jasmine.any(HTMLElement),
+      jasmine.objectContaining({mapId: '123'}),
+    );
+  });
+
   it('sets mapTypeId through the options', () => {
     const options = {mapTypeId: 'satellite'};
     mapSpy = createMapSpy(options);
@@ -401,6 +422,7 @@ describe('GoogleMap', () => {
       [zoom]="zoom"
       [options]="options"
       [mapTypeId]="mapTypeId"
+      [mapId]="mapId"
       (mapClick)="handleClick($event)"
       (centerChanged)="handleCenterChanged()"
       (mapRightclick)="handleRightclick($event)"
@@ -417,6 +439,7 @@ class TestApp {
   zoom?: number;
   options?: google.maps.MapOptions;
   mapTypeId?: google.maps.MapTypeId;
+  mapId?: string;
 
   handleClick(event: google.maps.MapMouseEvent) {}
   handleCenterChanged() {}

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

@@ -531,6 +531,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
       // Passing in an undefined `mapTypeId` seems to break tile loading
       // so make sure that we have some kind of default (see #22082).
       mapTypeId: this.mapTypeId || options.mapTypeId || DEFAULT_OPTIONS.mapTypeId,
+      mapId: this.mapId || options.mapId,
     };
   }
 

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

@@ -225,6 +225,10 @@ export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy {
   ngOnDestroy() {
     this.markerInitialized.complete();
     this._eventManager.destroy();
+
+    if (this.advancedMarker) {
+      this.advancedMarker.map = null;
+    }
   }
 
   /** Creates a combined options object using the passed-in options and the individual inputs. */