open-map
The open map action lets you tap the on-screen button to open your device's default map app (e.g., Google Maps, Apple Maps, or Waze) with the provided destination address. If multiple map apps are available, they will be listed for you to select one.
Configuration options
Some properties are common to all components, see Common component properties for a list and their configuration options.
title
Provide the action with a title, for example, Navigate.
address
Address of location - geocode string address to location. Valid formats are:
address string - city, street, e.g. `address: 20 W 34th St., New York, NY 10001, USA or in an expression calling a datasource
[email protected]latitude and longitude, e.g. address: 40.759412, -73.912306`
DMS format
latitude and longitude, e.g. address: latitude: 40.74860 longitude: "-73.98566"
icon
Select an to display when the action is configured as the secondary button or in a header action.
isHidden
true hides the action button, false shows the action button. Default setting is false.
styles
isDanger - Styles the action button in red or your brand's designated danger color.
isDisabled- Displays the action button as greyed out.isPrimary- Styles the action button in blue or your brand's designated primary color.isSecondary- Sets the action as a secondary button, accessible via the ellipsis. Theiconproperty can be used when the action button is displayed as a secondary button.
Examples and code snippets
Open map action button
In this example, a button at the bottom of the screen uses the action.open-map to open a modal listing the available map apps on the device. Select your preferred app to navigate to the specified address.
Example: See the full code example in GitHub.
title: New York
type: jig.default
header:
type: component.jig-header
options:
height: small
children:
type: component.image
options:
source:
uri: >
https://images.unsplash.com/photo-1485871981521-5b1fd3805eee
?w=800&auto=format&fit=crop&q=60
&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8bmV3JTIweW9ya3xlbnwwfHwwfHx8MA%3D%3D
children:
- type: component.entity
options:
children:
- type: component.entity-field
options:
isMultiline: true
label: ' '
value: >
New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean.
At its core is Manhattan, a densely populated borough that’s among the world’s major commercial,
financial, and cultural centers.
Its iconic sites include skyscrapers such as the Empire State Building and sprawling Central Park.
Broadway theater is staged in neon-lit Times Square.
actions:
- children:
# Add the action to open the modal to select the map app on the device,
# with an address to navigate to.
- type: action.open-map
options:
title: Go to New York
address: New York, USOpen map from a list (onPress)
This example includes a list of people and places in New York. Tapping the rightElement button opens a modal, displaying available map apps on the device. Select your preferred app to navigate to the specified address. The addresses are defined in a datasource in various formats, including text strings, latitude, and longitude.
Example: See the full code example in GitHub.
Open the map from a secondary action button
This example describes Central Park in New York. Tapping the ellipsis opens the secondary action button, which is configured with an icon displayed to the left of the title. When tapped, a modal opens, listing available map apps on the device. Select your preferred app to navigate to the specified address, defined by latitude and longitude.
Example: See the full code example in GitHub.
Jig header with open-map action icon
In this example, the action.open-map is configured in the jig.header action to open a modal listing the available map apps on the device. Select your preferred app to navigate to the specified address. The action is configured with an icon rather than a button.
Example: See the full code example in GitHub.
Last updated
Was this helpful?