mapDblclick not firing on AdvancedMarkerElement in @angular/google-maps

I'm using @angular/google-maps and AdvancedMarkerElement to display custom markers on my Google Map. I can handle single clicks just fine with (mapClick), but (mapDblclick) never fires—even for a simple marker without a custom DOM element.

Here is a minimal example of my component:

@Component({
selector: 'app-maps-viewer',
templateUrl: './maps-viewer.component.html',
})
export class MapsViewerComponent implements OnInit {
options: google.maps.MapOptions = {
disableDoubleClickZoom: false,
mapTypeId: 'roadmap',
};

markerOptions: google.maps.marker.AdvancedMarkerElementOptions = {
gmpClickable: true,
};

public markers: MapsMarker[] = [...];

public onMarkerClick(id: string) {
console.log('click', id);
}

public onMarkerDblclick(id: string) {
console.log('double click', id);
}
}



<google-map #mapElm height="100%" width="100%" [options]="options">
<map-advanced-marker
*ngFor="let marker of markers"
[position]="marker.position"
[title]="marker.title"
[content]="getPin(marker.iconClass, marker.color, marker.title)"
[options]="markerOptions"
(mapClick)="onMarkerClick(marker.id)"
(mapDblclick)="onMarkerDblclick(marker.id)">
</map-advanced-marker>

<!-- Simple marker for testing -->
<map-advanced-marker
title="Test Marker Lille"
[position]="{ lat: 50.62925, lng: 3.057256 }"
[options]="markerOptions"
(mapClick)="onMarkerClick('lille-test-simpleClick')"
(mapDblclick)="onMarkerDblclick('lille-test-doubleClick')">
</map-advanced-marker>
</google-map>



Problem:

Single click works as expected.

Double click never fires.

I tried both markers with a custom HTMLElement ([content]) and a simple marker, same result.

I also set gmpClickable: true in the marker options.

I want to handle both click and double click events on AdvancedMarkerElement. How can I make (mapDblclick) work with Angular Google Maps?

Continue reading...