fix(google-maps): some events not firing on advanced marker

The events introduced by #29747 didn't work, because the advanced marker doesn't support them. Instead we need to bind them as native events on the DOM node.

Fixes #31801.

Author: crisbeto

goldens/google-maps/index.api.md

@@ -320,14 +320,14 @@ export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy, MapAncho
     getAnchor(): google.maps.marker.AdvancedMarkerElement;
     set gmpDraggable(draggable: boolean);
     readonly mapClick: Observable<google.maps.MapMouseEvent>;
-    readonly mapDblclick: Observable<google.maps.MapMouseEvent>;
+    readonly mapDblclick: Observable<MouseEvent>;
     readonly mapDrag: Observable<google.maps.MapMouseEvent>;
     readonly mapDragend: Observable<google.maps.MapMouseEvent>;
     readonly mapDragstart: Observable<google.maps.MapMouseEvent>;
-    readonly mapMouseout: Observable<google.maps.MapMouseEvent>;
+    readonly mapMouseout: Observable<MouseEvent>;
     readonly mapMouseover: Observable<google.maps.MapMouseEvent>;
-    readonly mapMouseup: Observable<google.maps.MapMouseEvent>;
-    readonly mapRightclick: Observable<google.maps.MapMouseEvent>;
+    readonly mapMouseup: Observable<MouseEvent>;
+    readonly mapRightclick: Observable<MouseEvent>;
     readonly markerInitialized: EventEmitter<google.maps.marker.AdvancedMarkerElement>;
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
@@ -493,7 +493,7 @@ export class MapDirectionsService {
 export class MapEventManager {
     constructor(_ngZone: NgZone);
     destroy(): void;
-    getLazyEmitter<T>(name: string): Observable<T>;
+    getLazyEmitter<T>(name: string, type?: 'custom' | 'native'): Observable<T>;
     setTarget(target: MapEventManagerTarget): void;
 }
 

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

@@ -121,20 +121,21 @@ describe('MapAdvancedMarker', () => {
     const advancedMarkerSpy = createAdvancedMarkerSpy(DEFAULT_MARKER_OPTIONS);
     createAdvancedMarkerConstructorSpy(advancedMarkerSpy);
 
-    const addSpy = advancedMarkerSpy.addListener;
+    const customSpy = advancedMarkerSpy.addListener;
+    const nativeSpy = advancedMarkerSpy.addEventListener;
     const fixture = TestBed.createComponent(TestApp);
     fixture.detectChanges();
     flush();
 
-    expect(addSpy).toHaveBeenCalledWith('click', jasmine.any(Function));
-    expect(addSpy).toHaveBeenCalledWith('dblclick', jasmine.any(Function));
-    expect(addSpy).toHaveBeenCalledWith('mouseout', jasmine.any(Function));
-    expect(addSpy).toHaveBeenCalledWith('mouseover', jasmine.any(Function));
-    expect(addSpy).toHaveBeenCalledWith('mouseup', jasmine.any(Function));
-    expect(addSpy).toHaveBeenCalledWith('rightclick', jasmine.any(Function));
-    expect(addSpy).not.toHaveBeenCalledWith('drag', jasmine.any(Function));
-    expect(addSpy).not.toHaveBeenCalledWith('dragend', jasmine.any(Function));
-    expect(addSpy).not.toHaveBeenCalledWith('dragstart', jasmine.any(Function));
+    expect(customSpy).toHaveBeenCalledWith('click', jasmine.any(Function));
+    expect(nativeSpy).toHaveBeenCalledWith('dblclick', jasmine.any(Function));
+    expect(nativeSpy).toHaveBeenCalledWith('mouseout', jasmine.any(Function));
+    expect(nativeSpy).toHaveBeenCalledWith('mouseover', jasmine.any(Function));
+    expect(nativeSpy).toHaveBeenCalledWith('mouseup', jasmine.any(Function));
+    expect(nativeSpy).toHaveBeenCalledWith('auxclick', jasmine.any(Function));
+    expect(customSpy).not.toHaveBeenCalledWith('drag', jasmine.any(Function));
+    expect(customSpy).not.toHaveBeenCalledWith('dragend', jasmine.any(Function));
+    expect(customSpy).not.toHaveBeenCalledWith('dragstart', jasmine.any(Function));
   }));
 
   it('should be able to add an event listener after init', fakeAsync(() => {

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

@@ -135,32 +135,32 @@ export class MapAdvancedMarker
   /**
    * This event is fired when the AdvancedMarkerElement is double-clicked.
    */
-  @Output() readonly mapDblclick: Observable<google.maps.MapMouseEvent> =
-    this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dblclick');
+  @Output() readonly mapDblclick: Observable<MouseEvent> =
+    this._eventManager.getLazyEmitter<MouseEvent>('dblclick', 'native');
 
   /**
    * This event is fired when the mouse moves out of the AdvancedMarkerElement.
    */
-  @Output() readonly mapMouseout: Observable<google.maps.MapMouseEvent> =
-    this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseout');
+  @Output() readonly mapMouseout: Observable<MouseEvent> =
+    this._eventManager.getLazyEmitter<MouseEvent>('mouseout', 'native');
 
   /**
    * This event is fired when the mouse moves over the AdvancedMarkerElement.
    */
   @Output() readonly mapMouseover: Observable<google.maps.MapMouseEvent> =
-    this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseover');
+    this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseover', 'native');
 
   /**
    * This event is fired when the mouse button is released over the AdvancedMarkerElement.
    */
-  @Output() readonly mapMouseup: Observable<google.maps.MapMouseEvent> =
-    this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseup');
+  @Output() readonly mapMouseup: Observable<MouseEvent> =
+    this._eventManager.getLazyEmitter<MouseEvent>('mouseup', 'native');
 
   /**
    * This event is fired when the AdvancedMarkerElement is right-clicked.
    */
-  @Output() readonly mapRightclick: Observable<google.maps.MapMouseEvent> =
-    this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('rightclick');
+  @Output() readonly mapRightclick: Observable<MouseEvent> =
+    this._eventManager.getLazyEmitter<MouseEvent>('auxclick', 'native');
 
   /**
    * This event is repeatedly fired while the user drags the AdvancedMarkerElement.

src/google-maps/testing/fake-google-map-utils.ts

@@ -153,6 +153,8 @@ export function createAdvancedMarkerSpy(
 ): jasmine.SpyObj<google.maps.marker.AdvancedMarkerElement> {
   const advancedMarkerSpy = jasmine.createSpyObj('google.maps.marker.AdvancedMarkerElement', [
     'addListener',
+    'addEventListener',
+    'removeEventListener',
   ]);
   advancedMarkerSpy.addListener.and.returnValue({remove: () => {}});
   return advancedMarkerSpy;