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

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

@@ -9,8 +9,11 @@
                 (mapMousemove)="handleMove($event)"
                 (mapRightclick)="handleRightclick()"
                 [mapTypeId]="mapTypeId">
-      <map-marker-clusterer [imagePath]="markerClustererImagePath">
-        <map-marker #firstMarker="mapMarker"
+
+      <!-- 
+        DEPRECATED: You should use advanced markers but standard map markers are still supported 
+        <map-marker-clusterer >
+          <map-marker #firstMarker="mapMarker"
                     [position]="center"
                     (mapClick)="clickMarker(firstMarker)"></map-marker>
         @for (markerPosition of markerPositions; track markerPosition) {
@@ -19,7 +22,29 @@
             [options]="markerOptions"
             (mapClick)="clickMarker(marker)"></map-marker>
         }
-      </map-marker-clusterer>
+      </map-marker-clusterer> -->
+
+      <map-marker-clusterer >
+        <map-advanced-marker #firstMarker="mapAdvancedMarker"
+                  [position]="center"
+                  (mapClick)="clickAdvancedMarker(firstMarker)"></map-advanced-marker>
+      @for (markerPosition of markerPositions; track markerPosition) {
+        <map-advanced-marker #marker="mapAdvancedMarker"
+          [position]="markerPosition"
+          [content]="advancedMarkerContent"
+          title="Advanced Marker dynamic list"
+          (mapClick)="clickAdvancedMarker(marker)">
+          <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-marker-clusterer>
+
       @if (hasAdvancedMarker) {
         <map-advanced-marker
           #secondMarker="mapAdvancedMarker"

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

@@ -150,9 +150,6 @@ export class GoogleMapDemo {
   mapTypeId: google.maps.MapTypeId;
   mapTypeIds = ['hybrid', 'roadmap', 'satellite', 'terrain'] as google.maps.MapTypeId[];
 
-  markerClustererImagePath =
-    'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';
-
   directionsResult?: google.maps.DirectionsResult;
 
   constructor(private readonly _mapDirectionsService: MapDirectionsService) {
@@ -305,7 +302,7 @@ export class GoogleMapDemo {
 
     if (!apiLoadingPromise) {
       apiLoadingPromise = this._loadScript(
-        'https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js',
+        'https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js',
       );
     }
 

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.
@@ -17,20 +17,18 @@ Additional information can be found by looking at [Marker Clustering](https://de
 ```typescript
 // google-map-demo.component.ts
 import {Component} from '@angular/core';
-import {GoogleMap, MapMarker, MapMarkerClusterer} from '@angular/google-maps';
+import {GoogleMap, MapAdvancedMarker, MapMarkerClusterer} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
   standalone: true,
-  imports: [GoogleMap, MapMarker, MapMarkerClusterer],
+  imports: [GoogleMap, MapAdvancedMarker, MapMarkerClusterer],
 })
 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());
@@ -40,15 +38,16 @@ export class GoogleMapDemo {
 
 ```html
 <!-- google-map-demo.component.html -->
-<google-map 
+<google-map
   height="400px"
   width="750px"
   [center]="center"
   [zoom]="zoom"
-  (mapClick)="addMarker($event)">
-    <map-marker-clusterer [imagePath]="markerClustererImagePath">
+  (mapClick)="addMarker($event)"
+  [mapId]="'123'">
+    <map-marker-clusterer >
       @for (position of markerPositions; track position) {
-        <map-marker [position]="position" />
+        <map-advanced-marker [position]="position" />
       }
     </map-marker-clusterer>
 </google-map>