From f7cdfc65b5911593cbf203e9f737b831e86f0dc0 Mon Sep 17 00:00:00 2001
From: Andrew Sidhu <asidhu1@gmail.com>
Date: Wed, 13 Aug 2025 00:40:33 -0400
Subject: [PATCH] fix(google-maps):  right click enhancement.

By rewriting the prototype of the advancedmarker and inject functionality for right clicking there.We have a cleaner and more native event management within the component and fix issues surrounding different ways contextmenu is supported across browsers.
---
 src/dev-app/google-map/google-map-demo.html   |  9 +++-
 src/dev-app/google-map/google-map-demo.ts     |  4 ++
 .../map-advanced-marker.ts                    | 47 +++++++++++++++++++
 3 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/dev-app/google-map/google-map-demo.html b/src/dev-app/google-map/google-map-demo.html
index 9d4b75dd5a20..4b3077487f17 100644
--- a/src/dev-app/google-map/google-map-demo.html
+++ b/src/dev-app/google-map/google-map-demo.html
@@ -14,17 +14,22 @@
         <map-advanced-marker
           #firstMarker="mapAdvancedMarker"
           [position]="center"
-          (mapClick)="infoWindow.open(firstMarker)"></map-advanced-marker>
+          (mapClick)="infoWindow.open(firstMarker)"
+          (mapRightclick)="handleMarkerRightclick($event)"
+        ></map-advanced-marker>
         @for (markerPosition of markerPositions; track markerPosition) {
           <map-advanced-marker #marker="mapAdvancedMarker"
             [position]="markerPosition"
-            (mapClick)="infoWindow.open(marker)"></map-advanced-marker>
+            (mapClick)="infoWindow.open(marker)"
+            (mapRightclick)="handleMarkerRightclick($event)"
+          ></map-advanced-marker>
         }
       </map-marker-clusterer>
       @if (hasCustomContentMarker) {
         <map-advanced-marker
           #secondMarker="mapAdvancedMarker"
           (mapClick)="infoWindow.open(secondMarker)"
+          (mapRightclick)="handleMarkerRightclick($event)"
           title="Advanced Marker"
           [gmpDraggable]="false"
           [content]="advancedMarkerContent"
diff --git a/src/dev-app/google-map/google-map-demo.ts b/src/dev-app/google-map/google-map-demo.ts
index 7716f952d0da..e1751d3cb909 100644
--- a/src/dev-app/google-map/google-map-demo.ts
+++ b/src/dev-app/google-map/google-map-demo.ts
@@ -183,6 +183,10 @@ export class GoogleMapDemo {
     this.markerPositions.pop();
   }
 
+  handleMarkerRightclick(event: google.maps.MapMouseEvent) {
+    console.log('Marker right-clicked');
+  }
+
   editablePolylineChanged(editable: boolean) {
     this.polylineOptions = {
       ...this.polylineOptions,
diff --git a/src/google-maps/map-advanced-marker/map-advanced-marker.ts b/src/google-maps/map-advanced-marker/map-advanced-marker.ts
index b21c2401726f..d693132039a7 100644
--- a/src/google-maps/map-advanced-marker/map-advanced-marker.ts
+++ b/src/google-maps/map-advanced-marker/map-advanced-marker.ts
@@ -225,11 +225,58 @@ export class MapAdvancedMarker
       this.advancedMarker = new advancedMarkerConstructor(this._combineOptions());
       this._assertInitialized();
       this.advancedMarker.map = map;
+      this._addRightClickSupport();
       this._eventManager.setTarget(this.advancedMarker);
       this.markerInitialized.next(this.advancedMarker);
     });
   }
 
+  private _addRightClickSupport() {
+    if (!this.advancedMarker?.element) return;
+
+    // Enhance the AdvancedMarkerElement prototype to natively support rightclick events
+    const markerProto = Object.getPrototypeOf(this.advancedMarker);
+
+    if (!markerProto._rightClickEnhanced) {
+      const originalAddListener = markerProto.addListener;
+
+      markerProto.addListener = function (eventName: string, handler: Function) {
+        if (eventName === 'rightclick') {
+          // Handle rightclick using mousedown event with right mouse button check
+          const listener = (event: MouseEvent) => {
+            // Only handle right mouse button clicks (button 2)
+            if (event.button === 2) {
+              const mapMouseEvent = {
+                domEvent: event,
+                latLng: null,
+                stop: () => {
+                  event.stopPropagation();
+                  event.preventDefault();
+                },
+              } as google.maps.MapMouseEvent;
+
+              handler(mapMouseEvent);
+            }
+          };
+
+          this.element.addEventListener('mousedown', listener);
+
+          return {
+            remove: () => {
+              this.element.removeEventListener('mousedown', listener);
+            },
+          };
+        } else {
+          // Use original method for other events
+          return originalAddListener.call(this, eventName, handler);
+        }
+      };
+
+      // Mark prototype as enhanced to avoid multiple enhancements
+      markerProto._rightClickEnhanced = true;
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     const {advancedMarker, _content, _position, _title, _draggable, _zIndex} = this;
     if (advancedMarker) {