Merge pull request #393 from FlutterFlow/feature/maps-gesture-preference

Google Maps Takes Gesture Preference

Author: pinkeshmars

docs/ff-integrations/maps/google-maps/google-maps-widget.md

@@ -5,7 +5,10 @@ description: Learn how to add and configure the Google Maps widget in your Flutt
 tags: [Google Maps, Widget, Integration]
 sidebar_position: 2
 keywords: [FlutterFlow, Google Maps, Widget, Integration]
+toc_max_heading_level: 4
 ---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 # Google Maps Widget
 
@@ -155,6 +158,70 @@ the Map**.
 <div class="video-container"><iframe src="https://www.loom.
 com/embed/1b06bfc1365f4fc68f15089d4f84d798?sid=ff33ea94-cd7f-4b4e-822e-6fe0743dbd27" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
 
+#### Map Takes Gesture Preference
+When this is turned on, any gestures, such as zooming or dragging, will only affect the map, not the rest of the page. This is helpful if your map is inside a scrollable page, so users can interact with the map without accidentally scrolling the whole page.
+
+:::info
+This setting is only available if **Allow Interacting** and **Allow Zooming** are turned on.
+:::
+
+<Tabs>
+<TabItem value="1" label="Map Takes Gesture Preference (Disabled)" default>
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/JC6AnbIQpfSPfENrbd6s?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+</TabItem>
+<TabItem value="2" label="Map Takes Gesture Preference (Enabled)">
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/m5EdLhn4tlkjfRhhquqg?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+</TabItem>
+</Tabs>
+
 ### Show User Location
 
 When enabled, a blue dot appears on the map to indicate the user's current location. If the map is