feat(google-maps): Added feature to disable touch events on map

google-maps/README.md

@@ -283,6 +283,8 @@ export default MyMap;
 <docgen-index>
 
 * [`create(...)`](#create)
+* [`enableTouch()`](#enabletouch)
+* [`disableTouch()`](#disabletouch)
 * [`enableClustering(...)`](#enableclustering)
 * [`disableClustering()`](#disableclustering)
 * [`addMarker(...)`](#addmarker)
@@ -346,6 +348,24 @@ create(options: CreateMapArgs, callback?: MapListenerCallback<MapReadyCallbackDa
 --------------------
 
 
+### enableTouch()
+
+```typescript
+enableTouch() => Promise<void>
+```
+
+--------------------
+
+
+### disableTouch()
+
+```typescript
+disableTouch() => Promise<void>
+```
+
+--------------------
+
+
 ### enableClustering(...)
 
 ```typescript

google-maps/android/src/main/java/com/capacitorjs/plugins/googlemaps/CapacitorGoogleMapsPlugin.kt

@@ -33,6 +33,7 @@ class CapacitorGoogleMapsPlugin : Plugin() {
     private var maps: HashMap<String, CapacitorGoogleMap> = HashMap()
     private var cachedTouchEvents: HashMap<String, MutableList<MotionEvent>> = HashMap()
     private val tag: String = "CAP-GOOGLE-MAPS"
+    private var touchEnabled: HashMap<String, Boolean> = HashMap()
 
     companion object {
         const val LOCATION = "location"
@@ -56,6 +57,9 @@ class CapacitorGoogleMapsPlugin : Plugin() {
                             val touchY = event.y
 
                             for ((id, map) in maps) {
+                                if (touchEnabled[id] == false) {
+                                    continue
+                                }
                                 val mapRect = map.getMapBounds()
                                 if (mapRect.contains(touchX.toInt(), touchY.toInt())) {
                                     if (event.action == MotionEvent.ACTION_DOWN) {
@@ -169,6 +173,34 @@ class CapacitorGoogleMapsPlugin : Plugin() {
         }
     }
 
+    @PluginMethod
+    fun enableTouch(call: PluginCall) {
+        try {
+            val id = call.getString("id")
+            id ?: throw InvalidMapIdError()
+            touchEnabled[id] = true
+            call.resolve()
+        } catch (e: GoogleMapsError) {
+            handleError(call, e)
+        } catch (e: Exception) {
+            handleError(call, e)
+        }
+    }
+
+    @PluginMethod
+    fun disableTouch(call: PluginCall) {
+        try {
+            val id = call.getString("id")
+            id ?: throw InvalidMapIdError()
+            touchEnabled[id] = false
+            call.resolve()
+        } catch (e: GoogleMapsError) {
+            handleError(call, e)
+        } catch (e: Exception) {
+            handleError(call, e)
+        }
+    }
+
     @PluginMethod
     fun addMarker(call: PluginCall) {
         try {

google-maps/e2e-tests/src/pages/Map/CreateAndDestroyMap.tsx

@@ -115,6 +115,34 @@ const CreateAndDestroyMapPage: React.FC = () => {
     }
   }
 
+  async function disableMapTouchEvents() {
+    setCommandOutput('');
+
+    try {
+      if (maps) {
+        for (let map of maps) {
+          map.disableTouch();
+        }
+      }
+    } catch (err: any) {
+      setCommandOutput(err.message);
+    }
+  }
+
+  async function enableMapTouchEvents() {
+    setCommandOutput('');
+
+    try {
+      if (maps) {
+        for (let map of maps) {
+          map.enableTouch();
+        }
+      }
+    } catch (err: any) {
+      setCommandOutput(err.message);
+    }
+  }
+
   async function destroyMaps() {
     setCommandOutput('');
     try {
@@ -170,6 +198,12 @@ const CreateAndDestroyMapPage: React.FC = () => {
         >
           Remove On Map Click Listeners
         </IonButton>
+        <IonButton expand='block' id="enableTouchEvents" onClick={enableMapTouchEvents}>
+          Enable Touch Events
+        </IonButton>
+        <IonButton expand='block' id="disableTouchEvents" onClick={disableMapTouchEvents}>
+          Disable Touch Events
+        </IonButton>
         <IonButton expand="block" id="destroyMapButton" onClick={destroyMaps}>
           Destroy Maps
         </IonButton>

google-maps/ios/Plugin/CapacitorGoogleMapsPlugin.m

@@ -5,6 +5,8 @@
 // each method the plugin supports using the CAP_PLUGIN_METHOD macro.
 CAP_PLUGIN(CapacitorGoogleMapsPlugin, "CapacitorGoogleMaps",
    CAP_PLUGIN_METHOD(create, CAPPluginReturnPromise);
+   CAP_PLUGIN_METHOD(enableTouch, CAPPluginReturnPromise);
+   CAP_PLUGIN_METHOD(disableTouch, CAPPluginReturnPromise);
    CAP_PLUGIN_METHOD(addMarker, CAPPluginReturnPromise);
    CAP_PLUGIN_METHOD(addMarkers, CAPPluginReturnPromise);
    CAP_PLUGIN_METHOD(addPolygons, CAPPluginReturnPromise);

google-maps/ios/Plugin/CapacitorGoogleMapsPlugin.swift

@@ -146,6 +146,42 @@ public class CapacitorGoogleMapsPlugin: CAPPlugin, GMSMapViewDelegate {
         }
     }
 
+    @objc func enableTouch(_ call: CAPPluginCall) {
+        do {
+            guard let id = call.getString("id") else {
+                throw GoogleMapErrors.invalidMapId
+            }
+
+            guard let map = self.maps[id] else {
+                throw GoogleMapErrors.mapNotFound
+            }
+
+            map.enableTouch()
+
+            call.resolve()
+        } catch {
+            handleError(call, error: error)
+        }
+    }
+
+    @objc func disableTouch(_ call: CAPPluginCall) {
+        do {
+            guard let id = call.getString("id") else {
+                throw GoogleMapErrors.invalidMapId
+            }
+
+            guard let map = self.maps[id] else {
+                throw GoogleMapErrors.mapNotFound
+            }
+
+            map.disableTouch()
+
+            call.resolve()
+        } catch {
+            handleError(call, error: error)
+        }
+    }
+
     @objc func addMarker(_ call: CAPPluginCall) {
         do {
             guard let id = call.getString("id") else {

google-maps/ios/Plugin/Map.swift

@@ -179,9 +179,25 @@ public class Map {
 
     func destroy() {
         DispatchQueue.main.async {
+            self.enableTouch()
             self.targetViewController?.tag = 0
             self.mapViewController.view = nil
+        }
+    }
+
+    func enableTouch() {
+        DispatchQueue.main.async {
+            if let target = self.targetViewController, let itemIndex = WKWebView.disabledTargets.firstIndex(of: target) {
+                WKWebView.disabledTargets.remove(at: itemIndex)
+            }
+        }
+    }
 
+    func disableTouch() {
+        DispatchQueue.main.async {
+            if let target = self.targetViewController, !WKWebView.disabledTargets.contains(target) {
+                WKWebView.disabledTargets.append(target)
+            }
         }
     }
 
@@ -625,9 +641,15 @@ private func getResizedIcon(_ iconImage: UIImage, _ marker: Marker) -> UIImage?
 }
 
 extension WKWebView {
+    static var disabledTargets: [UIView] = []
+
     override open func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
         var hitView = super.hitTest(point, with: event)
 
+        if let tempHitView = hitView, WKWebView.disabledTargets.contains(tempHitView) {
+            return nil
+        }
+
         if let typeClass = NSClassFromString("WKChildScrollView"), let tempHitView = hitView, tempHitView.isKind(of: typeClass) {
             for item in tempHitView.subviews.reversed() {
                 let convertPoint = item.convert(point, from: self)

google-maps/src/implementation.ts

@@ -171,6 +171,8 @@ export interface FitBoundsArgs {
 
 export interface CapacitorGoogleMapsPlugin extends Plugin {
   create(options: CreateMapArgs): Promise<void>;
+  enableTouch(args: { id: string }): Promise<void>;
+  disableTouch(args: { id: string }): Promise<void>;
   addMarker(args: AddMarkerArgs): Promise<{ id: string }>;
   addMarkers(args: AddMarkersArgs): Promise<{ ids: string[] }>;
   removeMarker(args: RemoveMarkerArgs): Promise<void>;

google-maps/src/map.ts

@@ -29,6 +29,8 @@ export interface GoogleMapInterface {
     options: CreateMapArgs,
     callback?: MapListenerCallback<MapReadyCallbackData>,
   ): Promise<GoogleMap>;
+  enableTouch(): Promise<void>;
+  disableTouch(): Promise<void>;
   enableClustering(
     /**
      * The minimum number of markers that can be clustered together. The default is 4 markers.
@@ -309,6 +311,28 @@ export class GoogleMap {
     });
   }
 
+  /**
+   * Enable touch events on native map
+   *
+   * @returns void
+   */
+  async enableTouch(): Promise<void> {
+    return CapacitorGoogleMaps.enableTouch({
+      id: this.id,
+    });
+  }
+
+  /**
+   * Disable touch events on native map
+   *
+   * @returns void
+   */
+  async disableTouch(): Promise<void> {
+    return CapacitorGoogleMaps.disableTouch({
+      id: this.id,
+    });
+  }
+
   /**
    * Enable marker clustering
    *

google-maps/src/web.ts

@@ -136,6 +136,14 @@ export class CapacitorGoogleMapsWeb
     }
   }
 
+  async enableTouch(_args: { id: string }): Promise<void> {
+    this.maps[_args.id].map.setOptions({ gestureHandling: 'auto' });
+  }
+
+  async disableTouch(_args: { id: string }): Promise<void> {
+    this.maps[_args.id].map.setOptions({ gestureHandling: 'none' });
+  }
+
   async setCamera(_args: CameraArgs): Promise<void> {
     // Animation not supported yet...
     this.maps[_args.id].map.moveCamera({