feat(google-maps): Add support for the gmp-click event (#33147)

Add an output to proxy the gmp-click event and an input for gmpClickable which is set on the AdvancedMarkerElement. Everything is the same pattern as gmpDrag

Fixes #33145

Author: jermowery

goldens/google-maps/index.api.md

@@ -314,6 +314,8 @@ export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy, MapAncho
     set content(content: Node | google.maps.marker.PinElement | null);
     // (undocumented)
     getAnchor(): google.maps.marker.AdvancedMarkerElement;
+    readonly gmpClick: Observable<google.maps.marker.AdvancedMarkerClickEvent>;
+    set gmpClickable(clickable: boolean);
     set gmpDraggable(draggable: boolean);
     readonly mapClick: Observable<google.maps.MapMouseEvent>;
     readonly mapDblclick: Observable<MouseEvent>;
@@ -337,7 +339,7 @@ export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy, MapAncho
     set title(title: string);
     set zIndex(zIndex: number);
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MapAdvancedMarker, "map-advanced-marker", ["mapAdvancedMarker"], { "title": { "alias": "title"; "required": false; }; "position": { "alias": "position"; "required": false; }; "content": { "alias": "content"; "required": false; }; "gmpDraggable": { "alias": "gmpDraggable"; "required": false; }; "options": { "alias": "options"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; }, { "mapClick": "mapClick"; "mapDblclick": "mapDblclick"; "mapMouseout": "mapMouseout"; "mapMouseover": "mapMouseover"; "mapMouseup": "mapMouseup"; "mapRightclick": "mapRightclick"; "mapDrag": "mapDrag"; "mapDragend": "mapDragend"; "mapDragstart": "mapDragstart"; "markerInitialized": "markerInitialized"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MapAdvancedMarker, "map-advanced-marker", ["mapAdvancedMarker"], { "title": { "alias": "title"; "required": false; }; "position": { "alias": "position"; "required": false; }; "content": { "alias": "content"; "required": false; }; "gmpDraggable": { "alias": "gmpDraggable"; "required": false; }; "gmpClickable": { "alias": "gmpClickable"; "required": false; }; "options": { "alias": "options"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; }, { "mapClick": "mapClick"; "mapDblclick": "mapDblclick"; "mapMouseout": "mapMouseout"; "mapMouseover": "mapMouseover"; "mapMouseup": "mapMouseup"; "mapRightclick": "mapRightclick"; "mapDrag": "mapDrag"; "mapDragend": "mapDragend"; "mapDragstart": "mapDragstart"; "gmpClick": "gmpClick"; "markerInitialized": "markerInitialized"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MapAdvancedMarker, never>;
 }

src/google-maps/map-advanced-marker/map-advanced-marker.spec.ts

@@ -34,6 +34,7 @@ describe('MapAdvancedMarker', () => {
       title: undefined,
       content: undefined,
       gmpDraggable: undefined,
+      gmpClickable: undefined,
       zIndex: undefined,
       map: mapSpy,
     });
@@ -46,6 +47,7 @@ describe('MapAdvancedMarker', () => {
       map: mapSpy,
       content: undefined,
       gmpDraggable: true,
+      gmpClickable: true,
       zIndex: 1,
     };
     const advancedMarkerSpy = createAdvancedMarkerSpy(options);
@@ -56,6 +58,7 @@ describe('MapAdvancedMarker', () => {
     fixture.componentInstance.title = options.title!;
     fixture.componentInstance.content = options.content!;
     fixture.componentInstance.gmpDraggable = options.gmpDraggable!;
+    fixture.componentInstance.gmpClickable = options.gmpClickable!;
     fixture.componentInstance.zIndex = options.zIndex!;
 
     fixture.detectChanges();
@@ -69,6 +72,7 @@ describe('MapAdvancedMarker', () => {
       title: 'marker title',
       content: undefined,
       gmpDraggable: true,
+      gmpClickable: true,
       zIndex: 1,
     };
     const advancedMarkerSpy = createAdvancedMarkerSpy(options);
@@ -87,6 +91,7 @@ describe('MapAdvancedMarker', () => {
       title: 'marker title',
       content: undefined,
       gmpDraggable: true,
+      gmpClickable: true,
       zIndex: 1,
     };
 
@@ -95,6 +100,7 @@ describe('MapAdvancedMarker', () => {
       title: 'marker title 2',
       content: undefined,
       gmpDraggable: false,
+      gmpClickable: false,
       zIndex: 999,
       map: mapSpy,
     };
@@ -106,6 +112,7 @@ describe('MapAdvancedMarker', () => {
     fixture.componentInstance.title = expectedOptions.title!;
     fixture.componentInstance.content = expectedOptions.content!;
     fixture.componentInstance.gmpDraggable = expectedOptions.gmpDraggable!;
+    fixture.componentInstance.gmpClickable = expectedOptions.gmpClickable!;
     fixture.componentInstance.zIndex = expectedOptions.zIndex!;
     fixture.componentInstance.options = options!;
 
@@ -132,6 +139,7 @@ describe('MapAdvancedMarker', () => {
     expect(customSpy).not.toHaveBeenCalledWith('drag', jasmine.any(Function));
     expect(customSpy).not.toHaveBeenCalledWith('dragend', jasmine.any(Function));
     expect(customSpy).not.toHaveBeenCalledWith('dragstart', jasmine.any(Function));
+    expect(customSpy).not.toHaveBeenCalledWith('gmp-click', jasmine.any(Function));
   });
 
   it('should be able to add an event listener after init', () => {
@@ -162,6 +170,7 @@ describe('MapAdvancedMarker', () => {
         [position]="position"
         [content]="content"
         [gmpDraggable]="gmpDraggable"
+        [gmpClickable]="gmpClickable"
         [zIndex]="zIndex"
         (mapClick)="handleClick()"
         (mapDblclick)="handleDblclick()"
@@ -181,6 +190,7 @@ class TestApp {
   position!: google.maps.LatLng | google.maps.LatLngLiteral;
   content!: Node | google.maps.marker.PinElement;
   gmpDraggable!: boolean;
+  gmpClickable!: boolean;
   zIndex!: number;
   options!: google.maps.marker.AdvancedMarkerElementOptions;
 

src/google-maps/map-advanced-marker/map-advanced-marker.ts

@@ -105,6 +105,18 @@ export class MapAdvancedMarker
   }
   private _draggable: boolean | undefined;
 
+  /**
+   * If `true`, the `AdvancedMarkerElement` will be clickable and trigger the
+   * gmp-click event, and will be interactive for accessibility purposes (e.g.
+   * allowing keyboard navigation via arrow keys).
+   * @see https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.gmpClickable
+   */
+  @Input()
+  set gmpClickable(clickable: boolean) {
+    this._clickable = clickable;
+  }
+  private _clickable: boolean | undefined;
+
   /**
    * Options for constructing an AdvancedMarkerElement.
    * https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions
@@ -183,6 +195,14 @@ export class MapAdvancedMarker
   @Output() readonly mapDragstart: Observable<google.maps.MapMouseEvent> =
     this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dragstart');
 
+  /**
+   * This event is fired when the user starts dragging the AdvancedMarkerElement.
+   * https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.gmp-click
+   */
+  @Output()
+  readonly gmpClick: Observable<google.maps.marker.AdvancedMarkerClickEvent> =
+    this._eventManager.getLazyEmitter<google.maps.marker.AdvancedMarkerClickEvent>('gmp-click');
+
   /** Event emitted when the marker is initialized. */
   @Output() readonly markerInitialized: EventEmitter<google.maps.marker.AdvancedMarkerElement> =
     new EventEmitter<google.maps.marker.AdvancedMarkerElement>();
@@ -228,7 +248,7 @@ export class MapAdvancedMarker
   }
 
   ngOnChanges(changes: SimpleChanges<this>) {
-    const {advancedMarker, _content, _position, _title, _draggable, _zIndex} = this;
+    const {advancedMarker, _content, _position, _title, _draggable, _clickable, _zIndex} = this;
     if (advancedMarker) {
       if (changes['title']) {
         advancedMarker.title = _title;
@@ -238,6 +258,10 @@ export class MapAdvancedMarker
         advancedMarker.gmpDraggable = _draggable;
       }
 
+      if (changes['gmpClickable']) {
+        advancedMarker.gmpClickable = _clickable;
+      }
+
       if (changes['content']) {
         advancedMarker.content = _content;
       }
@@ -283,6 +307,7 @@ export class MapAdvancedMarker
       content: this._content || options.content,
       zIndex: this._zIndex ?? options.zIndex,
       gmpDraggable: this._draggable ?? options.gmpDraggable,
+      gmpClickable: this._clickable ?? options.gmpClickable,
       map: this._googleMap.googleMap,
     };
   }