feat(google-maps): switch to non-deprecated API for clustering

The marker clusterer component is currently based on the `@googlemaps/markerclustererplus` package which is deprecated. These changes rewrite the component to use `@googlemaps/markerclusterer` instead.

BREAKING CHANGES:
The new `@googlemaps/markerclusterer` API should be imported instead of the old one. Read more at: https://github.com/googlemaps/js-markerclusterer

Furthermore, the new clustering package doesn't offer the same set of public APIs. As a result, the following inputs to the `MapMarkerClusterer` component have been removed:
* `ariaLabelFn`
* `averageCenter`
* `batchSizeIE`
* `calculator`
* `clusterClass`
* `enableRetinaIcons`
* `gridSize`
* `ignoreHidden`
* `imageExtension`
* `imagePath`
* `imageSizes`
* `maxZoom`
* `minimumClusterSize`
* `styles`
* `title`
* `zIndex`
* `zoomOnClick`
* `options`

It is now recommended to customize the cluster using the `renderer` and `algorithm` inputs.

Fixes #23695.

Author: crisbeto

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

@@ -8,7 +8,7 @@
               (mapMousemove)="handleMove($event)"
               (mapRightclick)="handleRightclick()"
               [mapTypeId]="mapTypeId">
-    <map-marker-clusterer [imagePath]="markerClustererImagePath">
+    <map-marker-clusterer>
       <map-marker #firstMarker="mapMarker"
                   [position]="center"
                   (mapClick)="clickMarker(firstMarker)"></map-marker>

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

@@ -119,9 +119,6 @@ export class GoogleMapDemo {
     google.maps.MapTypeId.TERRAIN,
   ];
 
-  markerClustererImagePath =
-    'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';
-
   directionsResult?: google.maps.DirectionsResult;
 
   constructor(private readonly _mapDirectionsService: MapDirectionsService) {}

src/dev-app/index.html

@@ -20,7 +20,7 @@
 
   <script src="zone.js/dist/zone.js"></script>
   <script src="https://www.youtube.com/iframe_api"></script>
-  <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
+  <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
   <script>
     (function loadGoogleMaps() {
       // Key can be set through the `GOOGLE_MAPS_KEY` environment variable.

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

@@ -1,13 +1,13 @@
-#MapMarkerClusterer
+# MapMarkerClusterer
 
-The `MapMarkerClusterer` component wraps the [`MarkerClusterer` class](https://googlemaps.github.io/js-markerclustererplus/classes/markerclusterer.html) from the [Google Maps JavaScript MarkerClustererPlus Library](https://github.com/googlemaps/js-markerclustererplus). The `MapMarkerClusterer` component displays a cluster of markers that are children of the `<map-marker-clusterer>` tag. Unlike the other Google Maps components, MapMarkerClusterer does not have an `options` input, so any input (listed in the [documentation](https://googlemaps.github.io/js-markerclustererplus/index.html) for the `MarkerClusterer` class) should be set directly.
+The `MapMarkerClusterer` component wraps the [`MarkerClusterer` class](https://googlemaps.github.io/js-markerclusterer/classes/MarkerClusterer.html) from the [Google Maps JavaScript MarkerClusterer Library](https://github.com/googlemaps/js-markerclusterer). The `MapMarkerClusterer` component displays a cluster of markers that are children of the `<map-marker-clusterer>` tag. Unlike the other Google Maps components, MapMarkerClusterer does not have an `options` input, so any input (listed in the [documentation](https://googlemaps.github.io/js-markerclusterer/) for the `MarkerClusterer` class) should be set directly.
 
 ## Loading the Library
 
-Like the Google Maps JavaScript API, the MarkerClustererPlus library needs to be loaded separately. This can be accomplished by using this script tag:
+Like the Google Maps JavaScript API, the MarkerClusterer library needs to be loaded separately. This can be accomplished by using this script tag:
 
 ```html
-<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
+<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
 ```
 
 Additional information can be found by looking at [Marker Clustering](https://developers.google.com/maps/documentation/javascript/marker-clustering) in the Google Maps JavaScript API documentation.
@@ -26,8 +26,6 @@ export class GoogleMapDemo {
   center: google.maps.LatLngLiteral = {lat: 24, lng: 12};
   zoom = 4;
   markerPositions: google.maps.LatLngLiteral[] = [];
-  markerClustererImagePath =
-      'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';
 
   addMarker(event: google.maps.MapMouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
@@ -42,7 +40,7 @@ export class GoogleMapDemo {
             [center]="center"
             [zoom]="zoom"
             (mapClick)="addMarker($event)">
-  <map-marker-clusterer [imagePath]="markerClustererImagePath">
+  <map-marker-clusterer>
     <map-marker *ngFor="let markerPosition of markerPositions"
                 [position]="markerPosition"></map-marker>
   </map-marker-clusterer>