Merge pull request #32 from FlutterFlow/pooja/maps

Integration - Google Maps

Author: pinkeshmars

docs/Integrations/google-cloud/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Google Cloud"
+}

docs/Integrations/google-cloud/app-restriction.png

@@ -0,0 +1,85 @@
+---
+title: Secure API Keys
+---
+
+# Best Practices: Secure API Keys
+
+Google Cloud API key restriction is essential for managing access and enhancing security when
+working with Google Cloud services. This overview explains how to effectively restrict API keys,
+allowing developers to control how and where their keys can be used. Developers can set geographical
+restrictions, bind keys to specific IP addresses, or limit usage to particular services. These
+measures ensure that API keys are secured, helping to protect projects and maintain optimal
+functionality.
+
+To minimize potential damage from compromised API keys:
+
+- **Add restrictions to your API key:** By setting restrictions, you can limit how an API key can be
+  used, thus reducing the impact if it becomes compromised.
+
+- **Delete unnecessary API keys:** Remove any API keys that are no longer required to reduce
+  exposure to attacks.
+
+- **Rotate your API keys periodically:** Regularly create new API keys, delete the old ones, and
+  update your applications to use the new keys. This practice helps maintain security and limit the
+  lifespan of any single key.
+
+## Add restrictions to your API key
+
+API keys are unrestricted by default. Unrestricted keys are insecure because they can be used by
+anyone, from anywhere. You can add either [**application restrictions
+**](https://cloud.google.com/docs/authentication/api-keys?#adding-application-restrictions) or [*
+*API restrictions**](https://cloud.google.com/docs/authentication/api-keys?#api_key_restrictions) to
+enhance
+security.
+
+In the following example, we will use the **Map API keys** and restrict them to specific platforms
+using
+their unique identifiers.
+
+At this stage, you should already have API keys created, but they are currently unrestricted. If
+they are not yet created, you can follow the integration process for any of the Google Cloud
+services we support in FlutterFlow, or for Maps, [**you can go here.
+**](../maps/google-maps/generate-maps-keys)
+
+All your created API keys should be available on
+the [Cloud Credentials Page](https://console.cloud.google.com/apis/credentials). (Ensure you are
+logged into the correct Google account and are in the right Google Cloud project.)
+
+Follow the steps below to enable the iOS key exclusively for iOS apps with a unique package name:
+
+<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/givOcppDSZHXzWJDloWj?embed&show_copy_link=true"
+        title="Restrict API Keys"
+        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>
+
+Now your iOS API Key will only work when accessed from your app with the given unique identifier.
+You can also restrict the API keys by **HTTP referrers** or **IP addresses**. Here's a quick
+overview from the official docs:
+
+![app-restriction.png](app-restriction.png)
+
+:::note[Learn More]
+Learn more about **securing API keys for all platforms and restricting API usage** by visiting
+the official [**Google Cloud Docs**](https://cloud.google.com/docs/authentication/api-keys?#securing).
+:::

docs/Integrations/google-cloud/restrict-keys.md

@@ -0,0 +1,3 @@
+{
+  "label": "Maps"
+}

docs/Integrations/maps/_category_.json

@@ -0,0 +1,75 @@
+---
+title: Generate Maps Keys
+sidebar_position: 1
+
+---
+
+# Maps & Places APIs
+
+FlutterFlow natively supports **Google Maps**, providing a seamless and efficient way to embed
+interactive maps into your FlutterFlow apps. It also supports **Places API** that returns formatted location data and imagery about establishments, geographic locations, or prominent points of interest.
+
+## Add Maps APIs
+
+To enable **Google Maps** in your project, please follow the steps:
+
+### Get API Keys
+
+To start working with **Google Maps APIs**, you need to enable the **Maps API** from the [Google
+Cloud Console](https://console.cloud.google.com/).
+
+1. As you land on the Cloud console, make sure you are in the correct Google Cloud project. Then,
+  from the right menu, click on [**Library**](https://console.cloud.google.com/apis/library) and
+  search for **Maps**.
+
+2. You may receive a prompt from Google Cloud to add a billing account. Please add a billing account
+  to continue.
+
+3. You will see options such as the **Maps SDK for iOS, Maps SDK for Android**, and the **Maps
+  Javascript API**. Select the platform you wish to support and then click **Enable**.
+  If you are running on Run Mode, ensure that your Maps Javascript API is enabled.
+
+<div class="video-container"><iframe src="https://www.loom.
+com/embed/b1f6d8ddcc44492a92f833dafa619ec0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+<p></p>
+
+:::warning
+To secure your API keys, refer to the [**Best Practices guide: Secure API Keys**](..%2F..%2Fcloud%2Frestrict-keys.md)
+:::
+
+- Click on the Credentials menu from the left panel.
+
+- Find the key for the platform you need, and copy the key.
+
+### Add keys to FlutterFlow
+
+Now add the API keys platform wise to FlutterFlow Settings page
+
+![g-maps-settings.png](..%2Fimgs%2Fg-maps-settings.png)
+
+### Create a new Key if not available
+
+If you don't find the Android key (auto created by Firebase) or iOS key (auto created by
+Firebase) in the Google developer console, here are the steps to create one:
+
+- On your Cloud console, click the **Credentials** menu on the left.
+
+- Click on the **+ Create Credentials** at the top.
+
+- Click on the **API Key** to create a new key for the Android app. Similarly, create one for
+  iOS and Web.
+
+<div class="video-container"><iframe src="https://www.loom.
+com/embed/2c644aa950c44f76b19c6787784cf3b5?sid=3e22206e-4b4b-4734-b842-0c644d32f344" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+
+
+## Add Places APIs
+
+To enable **Places API** in your project, please follow the steps under 
+["Add Maps API" section](#add-maps-apis) and additionally also enable Places API from the API 
+library if not 
+already enabled. 
+
+![places-api.png](imgs/places-api.png)
+
+

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

@@ -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)
+
+
+
+
+
+
+