refactor 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.

Author: SippieCup

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"

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,

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) {