From fa1d475459e7c279c3ece425d670f21aa87b7c8e Mon Sep 17 00:00:00 2001 From: Jeremy Mowery Date: Fri, 24 Apr 2026 17:37:22 +0000 Subject: [PATCH] feat(google-maps): Add support for the gmp-click event 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 --- goldens/google-maps/index.api.md | 4 ++- .../map-advanced-marker.spec.ts | 10 +++++++ .../map-advanced-marker.ts | 27 ++++++++++++++++++- 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/goldens/google-maps/index.api.md b/goldens/google-maps/index.api.md index c6b22ae40f04..dbc87214d31e 100644 --- a/goldens/google-maps/index.api.md +++ b/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; + set gmpClickable(clickable: boolean); set gmpDraggable(draggable: boolean); readonly mapClick: Observable; readonly mapDblclick: Observable; @@ -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; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } diff --git a/src/google-maps/map-advanced-marker/map-advanced-marker.spec.ts b/src/google-maps/map-advanced-marker/map-advanced-marker.spec.ts index 828de99c5932..6db115efcdb3 100644 --- a/src/google-maps/map-advanced-marker/map-advanced-marker.spec.ts +++ b/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; diff --git a/src/google-maps/map-advanced-marker/map-advanced-marker.ts b/src/google-maps/map-advanced-marker/map-advanced-marker.ts index 6fdfec61aa80..825ba1320169 100644 --- a/src/google-maps/map-advanced-marker/map-advanced-marker.ts +++ b/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 = this._eventManager.getLazyEmitter('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 = + this._eventManager.getLazyEmitter('gmp-click'); + /** Event emitted when the marker is initialized. */ @Output() readonly markerInitialized: EventEmitter = new EventEmitter(); @@ -228,7 +248,7 @@ export class MapAdvancedMarker } ngOnChanges(changes: SimpleChanges) { - 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, }; }