fix(google-maps): deprecate heatmap layer (angular#33208)

The APIs that the heatmap layer is based on have been deprecated for about a year and Google Maps will remove them later this month.

These changes turn the `map-heatmap-layer` into a no-op and log an error message so that users know what is happening.

Author: crisbeto

goldens/google-maps/index.api.md

@@ -305,8 +305,8 @@ export class GoogleMapsModule {
     static ɵmod: i0.ɵɵNgModuleDeclaration<GoogleMapsModule, never, [typeof GoogleMap, typeof MapBaseLayer, typeof MapBicyclingLayer, typeof MapCircle, typeof MapDirectionsRenderer, typeof MapGroundOverlay, typeof MapHeatmapLayer, typeof MapInfoWindow, typeof MapKmlLayer, typeof MapMarker, typeof MapAdvancedMarker, typeof DeprecatedMapMarkerClusterer, typeof MapPolygon, typeof MapPolyline, typeof MapRectangle, typeof MapTrafficLayer, typeof MapTransitLayer, typeof MapMarkerClusterer], [typeof GoogleMap, typeof MapBaseLayer, typeof MapBicyclingLayer, typeof MapCircle, typeof MapDirectionsRenderer, typeof MapGroundOverlay, typeof MapHeatmapLayer, typeof MapInfoWindow, typeof MapKmlLayer, typeof MapMarker, typeof MapAdvancedMarker, typeof DeprecatedMapMarkerClusterer, typeof MapPolygon, typeof MapPolyline, typeof MapRectangle, typeof MapTrafficLayer, typeof MapTransitLayer, typeof MapMarkerClusterer]>;
 }
 
-// @public
-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 @deprecated
+export type HeatmapData = any;
 
 // @public
 export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint, MarkerDirective {
@@ -532,19 +532,14 @@ export class MapGroundOverlay implements OnInit, OnDestroy {
     static ɵfac: i0.ɵɵFactoryDeclaration<MapGroundOverlay, never>;
 }
 
-// @public
-export class MapHeatmapLayer implements OnInit, OnChanges, OnDestroy {
+// @public @deprecated
+export class MapHeatmapLayer {
+    constructor();
     set data(data: HeatmapData);
     getData(): HeatmapData;
-    heatmap?: google.maps.visualization.HeatmapLayer;
-    readonly heatmapInitialized: EventEmitter<google.maps.visualization.HeatmapLayer>;
-    // (undocumented)
-    ngOnChanges(changes: SimpleChanges<this>): void;
-    // (undocumented)
-    ngOnDestroy(): void;
-    // (undocumented)
-    ngOnInit(): void;
-    set options(options: Partial<google.maps.visualization.HeatmapLayerOptions>);
+    heatmap?: any;
+    readonly heatmapInitialized: EventEmitter<any>;
+    set options(options: any);
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MapHeatmapLayer, "map-heatmap-layer", ["mapHeatmapLayer"], { "data": { "alias": "data"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "heatmapInitialized": "heatmapInitialized"; }, never, never, true, never>;
     // (undocumented)

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

@@ -72,11 +72,6 @@
       @if (directionsResult) {
         <map-directions-renderer [directions]="directionsResult"></map-directions-renderer>
       }
-      @if (isHeatmapDisplayed) {
-        <map-heatmap-layer
-          [data]="heatmapData"
-          [options]="heatmapOptions"></map-heatmap-layer>
-      }
     </google-map>
 
     <p><label>Latitude:</label> {{display?.lat}}</p>
@@ -206,13 +201,6 @@
       </label>
     </div>
 
-    <div>
-      <label for="heatmap-layer-checkbox">
-        Toggle Heatmap Layer
-        <input type="checkbox" (click)="toggleHeatmapLayerDisplay()">
-      </label>
-    </div>
-
     <div>
       <label>
         Toggle Advanced Marker with custom content

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

@@ -24,7 +24,6 @@ import {
   MapDirectionsRenderer,
   MapDirectionsService,
   MapGroundOverlay,
-  MapHeatmapLayer,
   MapInfoWindow,
   MapKmlLayer,
   MapPolygon,
@@ -73,7 +72,6 @@ let apiLoadingPromise: Promise<unknown> | null = null;
     MapCircle,
     MapDirectionsRenderer,
     MapGroundOverlay,
-    MapHeatmapLayer,
     MapInfoWindow,
     MapKmlLayer,
     MapMarkerClusterer,
@@ -108,10 +106,6 @@ export class GoogleMapDemo {
     strokeOpacity: 0.8,
   };
 
-  heatmapData = this._getHeatmapData(5, 1);
-  heatmapOptions = {radius: 50};
-  isHeatmapDisplayed = false;
-
   isPolygonDisplayed = false;
   polygonOptions: google.maps.PolygonOptions = {
     paths: POLYGON_PATH,
@@ -234,22 +228,6 @@ export class GoogleMapDemo {
     }
   }
 
-  toggleHeatmapLayerDisplay() {
-    this.isHeatmapDisplayed = !this.isHeatmapDisplayed;
-  }
-
-  private _getHeatmapData(offset: number, increment: number) {
-    const result: google.maps.LatLngLiteral[] = [];
-
-    for (let lat = this.center.lat - offset; lat < this.center.lat + offset; lat += increment) {
-      for (let lng = this.center.lng - offset; lng < this.center.lng + offset; lng += increment) {
-        result.push({lat, lng});
-      }
-    }
-
-    return result;
-  }
-
   private _loadApi() {
     if (this.hasLoaded) {
       return;