Add move center map docs

Author: PoojaB26

docs/Integrations/maps/google-maps/generate-maps-keys.md

@@ -70,6 +70,6 @@ To enable **Places API** in your project, please follow the steps under
 library if not 
 already enabled. 
 
-![places-api.png](places-api.png)
+![places-api.png](imgs/places-api.png)
 
 

docs/integrations/maps/google-maps/img.png renamed to docs/Integrations/maps/google-maps/imgs/img.png

@@ -0,0 +1,31 @@
+---
+title: Move Map Center Action
+---
+
+
+# Move Map Center [Action]
+
+This action allows you to center the map on a specified location, such as setting the pickup and drop-off points. You can define the location either by directly inputting the latitude and longitude values or by using a variable.
+
+:::info[Prerequisites]
+- To implement this feature, add a Google Maps widget to your page or component. 
+[**Learn how.**](google-maps-widget.md)
+- If you wish to enable users to select locations from a dropdown using FlutterFlow's PlacePicker 
+  widget, you can also integrate the Place Picker widget into your map view. [**Learn more here**](place-picker-widget.md).
+:::
+
+
+Assuming you've set up the Place Picker widget on your Google Maps widget view, let's add a button that triggers the action to move the map center, so the map centers on the newly selected location.
+
+In our example, we've added an IconButton with a location pin icon. For the button's OnTap 
+action trigger, we'll add the Move Map Center action and set the LatLng to the LatLng of the 
+Place Picker's selected place. You must check if the PlacePicker value (or the variable holding your new LatLng) is set before calling the Move Map Center action.
+
+![move-map.png](imgs/move-map.png)
+
+
+
+
+
+
+

docs/Integrations/maps/google-maps/imgs/move-map.png

@@ -39,8 +39,10 @@ Here's an example from the Demo app:
     </iframe>
 </div>
 
+<p></p>
+
 :::note[Prerequisites]
-- Ensure you have enabled **Places API** from Cloud console. This is a similar process to enabling Maps API for showing Google Maps
+- Ensure you have enabled **Places API** from Cloud console. [**Check out the Setup docs.**](generate-maps-keys)
 - Enable **Google Maps Platform Billing** via your Cloud console. Please note: Failing to enable the Google Maps Platform Billing will not show any place in an autocomplete list.
 - Add API keys as suggested in [Getting Started](generate-maps-keys) guide.
 
@@ -54,8 +56,101 @@ Here's an example from the Demo app:
 
 To add the PlacePicker widget to your project:
 
-- Drag the `PlacePicker` widget from the **Form Elements tab** (in the Widget Panel) or add it directly from the widget tree.
+<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/uWaLSOHPZctjnGik03Pu?embed&show_copy_link=true"
+        title="Add Place Picker widget"
+        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>
+
+By default, the `Place Picker` widget features an icon and the text "Select Location" on the 
+button. You can modify the styling and properties of these elements from the Properties Panel on 
+the right.
+
+If you retain the Text widget, the text will update to the name of the selected location when a user makes a selection. Both the icon and text are optional; adjust them according to your design requirements.
+
+<figure>
+    ![place-picker-properties.png](imgs%2Fplace-picker-properties.png)
+  <figcaption class="centered-caption">The widget properties of Place Picker widget</figcaption>
+</figure>
+
+## Use PlacePicker widget state values
 
-- Below the `PlacePicker` widget add some Text widgets to show the information about the place.
+The values associated with the selected place are stored in a `GooglePlace` custom data type exposed by FlutterFlow. It holds fields such as the selected place's Name, Address, LatLng, City, State, Country, and Zipcode. Users can use these values in any widget, either to directly set them in a Text widget or for further conditional calculations.
+
+<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/uWaLSOHPZctjnGik03Pu?embed&show_copy_link=true"
+        title="Use PlacePicker widget state"
+        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>
+Let's test this change in Test Mode:
+
+<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/2ncapOklwNGM3ETCntdl?embed&show_copy_link=true"
+        title="Place Picker Test"
+        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>
 
-![img.png](img.png)