Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrewseguin merged 1 commit into from
Apr 24, 2026
+39 −2
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion goldens/google-maps/index.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -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>;
}
Expand Down
10 changes: 10 additions & 0 deletions src/google-maps/map-advanced-marker/map-advanced-marker.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ describe('MapAdvancedMarker', () => {
title: undefined,
content: undefined,
gmpDraggable: undefined,
gmpClickable: undefined,
zIndex: undefined,
map: mapSpy,
});
Expand All @@ -46,6 +47,7 @@ describe('MapAdvancedMarker', () => {
map: mapSpy,
content: undefined,
gmpDraggable: true,
gmpClickable: true,
zIndex: 1,
};
const advancedMarkerSpy = createAdvancedMarkerSpy(options);
Expand All @@ -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();
Expand All @@ -69,6 +72,7 @@ describe('MapAdvancedMarker', () => {
title: 'marker title',
content: undefined,
gmpDraggable: true,
gmpClickable: true,
zIndex: 1,
};
const advancedMarkerSpy = createAdvancedMarkerSpy(options);
Expand All @@ -87,6 +91,7 @@ describe('MapAdvancedMarker', () => {
title: 'marker title',
content: undefined,
gmpDraggable: true,
gmpClickable: true,
zIndex: 1,
};

Expand All @@ -95,6 +100,7 @@ describe('MapAdvancedMarker', () => {
title: 'marker title 2',
content: undefined,
gmpDraggable: false,
gmpClickable: false,
zIndex: 999,
map: mapSpy,
};
Expand All @@ -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!;

Expand All @@ -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', () => {
Expand Down Expand Up @@ -162,6 +170,7 @@ describe('MapAdvancedMarker', () => {
[position]="position"
[content]="content"
[gmpDraggable]="gmpDraggable"
[gmpClickable]="gmpClickable"
[zIndex]="zIndex"
(mapClick)="handleClick()"
(mapDblclick)="handleDblclick()"
Expand All @@ -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;

Expand Down
27 changes: 26 additions & 1 deletion src/google-maps/map-advanced-marker/map-advanced-marker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Copy Markdown
Member

@crisbeto crisbeto Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we set this automatically if gmpClick is bound?

Copy link
Copy Markdown
Contributor Author

@jermowery jermowery Apr 24, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't for any of the drag events ¯\_(ツ)_/¯

I think the API could use a bit of an overhaul, especially since the underlying Google Maps API has changed since this was written. Probably would be best to do that as a separate thing

this._clickable = clickable;
}
private _clickable: boolean | undefined;

/**
* Options for constructing an AdvancedMarkerElement.
* https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions
Expand Down Expand Up @@ -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>();
Expand Down Expand Up @@ -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;
Expand All @@ -238,6 +258,10 @@ export class MapAdvancedMarker
advancedMarker.gmpDraggable = _draggable;
}

if (changes['gmpClickable']) {
advancedMarker.gmpClickable = _clickable;
}

if (changes['content']) {
advancedMarker.content = _content;
}
Expand Down Expand Up @@ -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,
};
}
Expand Down
Loading