Implement new map marker clusterer

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

@@ -10,26 +10,25 @@
                 (mapRightclick)="handleRightclick()"
                 [mapTypeId]="mapTypeId"
                 [mapId]="mapId">
-      <map-marker-clusterer [imagePath]="markerClustererImagePath">
-        <map-marker #firstMarker="mapMarker"
-                    [position]="center"
-                    (mapClick)="infoWindow.open(firstMarker)"></map-marker>
+      <map-marker-clusterer>
+        <map-advanced-marker
+          #firstMarker="mapAdvancedMarker"
+          [position]="center"
+          (mapClick)="infoWindow.open(firstMarker)"></map-advanced-marker>
         @for (markerPosition of markerPositions; track markerPosition) {
-          <map-marker #marker="mapMarker"
+          <map-advanced-marker #marker="mapAdvancedMarker"
             [position]="markerPosition"
-            [options]="markerOptions"
-            (mapClick)="infoWindow.open(marker)"></map-marker>
+            (mapClick)="infoWindow.open(marker)"></map-advanced-marker>
         }
       </map-marker-clusterer>
-      @if (hasAdvancedMarker) {
+      @if (hasCustomContentMarker) {
         <map-advanced-marker
           #secondMarker="mapAdvancedMarker"
           (mapClick)="infoWindow.open(secondMarker)"
           title="Advanced Marker"
           [gmpDraggable]="false"
-          [content]="hasAdvancedMarkerCustomContent ? advancedMarkerContent : null"
+          [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"/>
@@ -216,18 +215,8 @@
 
     <div>
       <label>
-        Toggle Advanced Marker
-        <input type="checkbox" [(ngModel)]="hasAdvancedMarker">
-      </label>
-    </div>
-
-    <div>
-      <label>
-        Toggle custom content for Advanced Marker
-        <input
-          type="checkbox"
-          [(ngModel)]="hasAdvancedMarkerCustomContent"
-          [disabled]="!hasAdvancedMarker">
+        Toggle Advanced Marker with custom content
+        <input type="checkbox" [(ngModel)]="hasCustomContentMarker">
       </label>
     </div>
 

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

@@ -25,13 +25,12 @@ import {
   MapHeatmapLayer,
   MapInfoWindow,
   MapKmlLayer,
-  MapMarker,
-  MapMarkerClusterer,
   MapPolygon,
   MapPolyline,
   MapRectangle,
   MapTrafficLayer,
   MapTransitLayer,
+  MapMarkerClusterer,
 } from '@angular/google-maps';
 
 const POLYLINE_PATH: google.maps.LatLngLiteral[] = [
@@ -75,7 +74,6 @@ let apiLoadingPromise: Promise<unknown> | null = null;
     MapHeatmapLayer,
     MapInfoWindow,
     MapKmlLayer,
-    MapMarker,
     MapMarkerClusterer,
     MapAdvancedMarker,
     MapPolygon,
@@ -98,7 +96,6 @@ export class GoogleMapDemo {
 
   center = {lat: 24, lng: 12};
   mapAdvancedMarkerPosition = {lat: 22, lng: 21};
-  markerOptions = {draggable: false};
   markerPositions: google.maps.LatLngLiteral[] = [];
   zoom = 4;
   display?: google.maps.LatLngLiteral;
@@ -153,17 +150,13 @@ export class GoogleMapDemo {
   isTrafficLayerDisplayed = false;
   isTransitLayerDisplayed = false;
   isBicyclingLayerDisplayed = false;
-  hasAdvancedMarker = false;
-  hasAdvancedMarkerCustomContent = true;
+  hasCustomContentMarker = false;
   // This is necessary for testing advanced markers. It seems like any value works locally.
   mapId = '123';
 
   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() {
@@ -262,7 +255,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/deprecated-map-marker-clusterer/README.md

@@ -0,0 +1,57 @@
+# Deprecation warning ⚠️
+This component is based on the deprecated `@googlemaps/markerclustererplus` library. Use the `map-marker-clusterer` component instead.
+
+## DeprecatedMapMarkerClusterer
+
+The `DeprecatedMapMarkerClusterer` 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 `DeprecatedMapMarkerClusterer` component displays a cluster of markers that are children of the `<deprecated-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.
+
+## 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:
+
+```html
+<script src="https://unpkg.com/@googlemaps/markerclustererplus/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.
+
+## Example
+
+```typescript
+// google-map-demo.component.ts
+import {Component} from '@angular/core';
+import {GoogleMap, MapMarker, DeprecatedMapMarkerClusterer} from '@angular/google-maps';
+
+@Component({
+  selector: 'google-map-demo',
+  templateUrl: 'google-map-demo.html',
+  imports: [GoogleMap, MapMarker, DeprecatedMapMarkerClusterer],
+})
+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());
+  }
+}
+```
+
+```html
+<!-- google-map-demo.component.html -->
+<google-map
+  height="400px"
+  width="750px"
+  [center]="center"
+  [zoom]="zoom"
+  (mapClick)="addMarker($event)">
+    <deprecated-map-marker-clusterer [imagePath]="markerClustererImagePath">
+      @for (position of markerPositions; track position) {
+        <map-marker [position]="position" />
+      }
+    </deprecated-map-marker-clusterer>
+</google-map>
+```