Skip to content

Commit 48ff064

Browse files
committed
Added launch map action
1 parent a0304b0 commit 48ff064

File tree

3 files changed

+97
-2
lines changed

3 files changed

+97
-2
lines changed
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"label": "Google Maps",
3-
"position": 1
3+
"position": 0
44
}
Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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>

firebase.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1010,7 +1010,7 @@
10101010
},
10111011
{
10121012
"source": "/actions/actions/widget-ui-interactions/launch-map",
1013-
"destination": "/integrations/google-maps/google-maps-widget",
1013+
"destination": "/integrations/maps/launch-map",
10141014
"type": 301
10151015
},
10161016
{

0 commit comments

Comments
 (0)