Skip to content

bug(google-maps): mapDblclick not firing on AdvancedMarkerElement #31801

@RomainActemium

Description

@RomainActemium

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

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>

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

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?

Actual Behavior

Problem:

Single click works as expected.

Double click never fires.

Environment

  • Angular: 20.1.2
  • CDK/Material : 20.1.2
  • Browser(s): Google Chrome Version 139.0.7258.139 (Build officiel) (64 bits)
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: google-maps

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions