fix(google-maps): advanced marker not destroyed

Fixes that the advanced marker wasn't being removed from the map on destroy.

Fixes #28609.

Author: crisbeto

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/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. */