bug(map-advanced-marker): mapMouseover and mapMouseout events not working on map-advanced-marker

[vinlos]

Is this a regression?

• No, this has never worked

Description

Hello,

despite the implementation of issue #29741 with PR #29747, mapMouseover and mapMouseout events not working for map-advanced-marker.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-6ffmnvxl?file=src%2Fmain.ts
Steps to reproduce:

1. Open development tools
2. Move mouse cursor over red pin on the map

Expected Behavior

we should see the string I'm over the marker in console

Actual Behavior

the bound method is not executed and nothing is printed in the console

Environment

• Angular: 19.0.6
• CDK/Material:
• Browser(s): any
• Operating System (e.g. Windows, macOS, Ubuntu): any

[crisbeto]

Hmm this is odd. I feel like when I was reviewing #29747, there were more events available. Now the documentation only shows click, drag, dragend and dragstart: https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.click. I tried binding the event through AdvancedMarkerElement.element.addEventListener, but the mouse events were behaving weirdly (both mouseout and mouseover emitting on enter). It seems like we can use addEventListener instead of addListener, but it's only available in the beta channel of the maps package.

[cklogs]

@crisbeto FYI I needed double click functionality and noticed it's also not working on the advanced marker.

[SippieCup]

@crisbeto FYI I needed double click functionality and noticed it's also not working on the advanced marker.

I submitted a PR that uses contextmenu as a workaround. But if you need it today, you can do what I am doing to get the functionality.

Edit: Added deconstruction because good code is better than assuming people copy and pasting code and adding leaks.

template.html:

@for (e of $mapElements(); track e.data.id) {
<map-advanced-marker
                    [options]="e.marker"
                    (mapClick)="markerClicked(e.data)"
                    (markerInitialized)="addRightClickListener($event, e.data)"
                    [content]="e.content"
                ></map-advanced-marker>
}

component.ts

export class YourComponent implements OnDestroy {
    private markerListeners = new Map<google.maps.marker.AdvancedMarkerElement, EventListener>();

    addRightClickListener(marker: google.maps.marker.AdvancedMarkerElement, data: Data) {
        const listener = (event: Event) => {
            this.markerRightClicked(data);
        };

        marker.addEventListener('contextmenu', listener);
        this.markerListeners.set(marker, listener);
    }

    removeRightClickListener(marker: google.maps.marker.AdvancedMarkerElement) {
        const listener = this.markerListeners.get(marker);
        if (listener) {
            marker.removeEventListener('contextmenu', listener);
            this.markerListeners.delete(marker);
        }
    }

    ngOnDestroy() {
        this.markerListeners.forEach((listener, marker) => {
            marker.removeEventListener('contextmenu', listener);
        });
        this.markerListeners.clear();
    }
}

[cklogs]

Can we expect the proper release fix for this issue in the near future?