|
| 1 | +--- |
| 2 | + |
| 3 | +title: Launch Map |
| 4 | +slug: /integrations/maps/launch-map |
| 5 | +description: Learn how to open Map app installed on your device from your FlutterFlow app. |
| 6 | +sidebar_position: 1 |
| 7 | +tags: [Maps, Action] |
| 8 | +keywords: [FlutterFlow, Launch Maps, Action,] |
| 9 | +--- |
| 10 | +# Launch Map |
| 11 | +Using this action, you can open the Map app installed on your device. For example, you could add this action on an event page to let users know more about the place inside the map apps like Google Maps, Apple Maps, and Waze app. |
| 12 | + |
| 13 | +You can specify the Lat Long details or full address of any place to access the additional information such as directions, call details, timings, photos, street view, reviews, and more. |
| 14 | + |
| 15 | +<div style={{ |
| 16 | + position: 'relative', |
| 17 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 18 | + height: 0, |
| 19 | + width: '100%'}}> |
| 20 | + <iframe |
| 21 | + src="https://demo.arcade.software/g8KeY6nO6mdwNP7wUdJA?embed&show_copy_link=true" |
| 22 | + title="" |
| 23 | + style={{ |
| 24 | + position: 'absolute', |
| 25 | + top: 0, |
| 26 | + left: 0, |
| 27 | + width: '100%', |
| 28 | + height: '100%', |
| 29 | + colorScheme: 'light' |
| 30 | + }} |
| 31 | + frameborder="0" |
| 32 | + loading="lazy" |
| 33 | + webkitAllowFullScreen |
| 34 | + mozAllowFullScreen |
| 35 | + allowFullScreen |
| 36 | + allow="clipboard-write"> |
| 37 | + </iframe> |
| 38 | +</div> |
| 39 | +<p></p> |
| 40 | + |
| 41 | +## Types of Map apps |
| 42 | + |
| 43 | +This action lets you specify the type of map app to open. If it's not installed, the default map app of the platform will be used. For example, opening the Google Maps on iOS devices. If not installed, it will open the default Apple Maps app. |
| 44 | + |
| 45 | +You can launch the following types of maps apps: |
| 46 | + |
| 47 | +1. **System Default**: Opens the default map app. That is opening Google Maps on Android devices and Apple Maps on iOS devices. |
| 48 | +2. **Google Maps**: Google's default map app on Android devices. |
| 49 | +3. **Apple Maps**: The default map app on iOS devices from Apple. |
| 50 | +4. [**Waze**](https://play.google.com/store/apps/details?id=com.waze): App that tells you about real-time traffic, police, crashes, and more. |
| 51 | + |
| 52 | +### Adding Launch Map [Action] |
| 53 | + |
| 54 | +Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget. |
| 55 | + |
| 56 | +1. Select the **Widget** (e.g. Location icon, Address text) on which you want to define the action. |
| 57 | +2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window. |
| 58 | + 1. Click on the **+ Add Action**. |
| 59 | + 2. On the right side, search and select the **Launch Map** action. |
| 60 | + 3. Set the **Preferred Map Type** among the **System Default**, **Google Maps**, **Apple Maps,** and **Waze**. |
| 61 | + 4. To open the map app using lat long: |
| 62 | + 1. Set the **Place Type** to **Location**. |
| 63 | + 2. Inside the **Location** section, enter the values in the **Latitude** and **Longitude** input boxes. You can also specify these values from a variable, such as an app state variable or a variable from an API response by clicking on the **Set from Variable**. |
| 64 | + 3. (Optional) To set the place name (which will be displayed when the map app is opened), Inside the **Title** section, enter the place name in the **Value** input box. To set it from the variable, click on the **Set from Variable**. |
| 65 | + 5. To open the map app using address: |
| 66 | + 1. Set the **Place Type** to **Address**. |
| 67 | + 2. Inside the **Address** section, enter the address into the **Value** input box. You can also specify the address from a variable, such as an app state variable, or a variable from an API response by clicking on the **Set from Variable**. |
| 68 | + 3. (Optional) To set the place name (which will be displayed when the map app is opened), Inside the **Title** section, enter the place name in the **Value** input box. To set it from the variable, click on the **Set from Variable**. |
| 69 | + 6. Click **Close**. |
| 70 | + |
| 71 | +<div style={{ |
| 72 | + position: 'relative', |
| 73 | + paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding |
| 74 | + height: 0, |
| 75 | + width: '100%'}}> |
| 76 | + <iframe |
| 77 | + src="https://demo.arcade.software/QYMvBgTlTwlYUVmh24L6?embed&show_copy_link=true" |
| 78 | + title="" |
| 79 | + style={{ |
| 80 | + position: 'absolute', |
| 81 | + top: 0, |
| 82 | + left: 0, |
| 83 | + width: '100%', |
| 84 | + height: '100%', |
| 85 | + colorScheme: 'light' |
| 86 | + }} |
| 87 | + frameborder="0" |
| 88 | + loading="lazy" |
| 89 | + webkitAllowFullScreen |
| 90 | + mozAllowFullScreen |
| 91 | + allowFullScreen |
| 92 | + allow="clipboard-write"> |
| 93 | + </iframe> |
| 94 | +</div> |
| 95 | +<p></p> |
0 commit comments