Map View is the parent map component and it's used to display the map. All other map-related components are nested within the Map View. There are a variety of configuration properties and related components which you can use to customize the map.

How to use

Imagine you have an REST API Endpoint that returns an array of restaurant objects which include a latitude and longitude key and you want to display a marker on the map for each restaurant. You can pass this array to the Map View’s Marker Data property just like you would for a List component. This lets you display Map Markers for each item in the list. You can further customize the map marker by nesting a Map Marker inside the Map View.

You can further customize the Map View with any of the available Configuration Properties and Data Properties, in addition to running Actions using the available Triggers.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Configuration Properties

Component NameThe display name for this component
ProviderBy default, the device platform's native map is rendered - Apple Maps on iOS and Google Maps on Android. If you select Google, then Google Maps will be displayed regardless of the device.
Zoom EnabledIf enabled, will allow the user to zoom in/out on the map
Shows CompassIf enabled, will display the map's compass
Loading Indicator ColorThe color of the loading indicator if Loading Enabled is enabled
Loading BG ColorThe color of the loading background if Loading Enabled is enabled
Shows User LocationIf enabled, will display the user's location when the map is rendered
Follows User Location (iOS Only)If enabled, will update the user's location on the map. iOS only.
Shows Points of InterestIf enabled, will display other public locations on the map.
Initial ZoomSets the initial zoom level when the map is first rendered. Accepts a number between 0-20 with 0 being the highest, and 20 the lowest, elevation.
Rotate EnabledIf enabled, will allow the user to rotate the map
Pan EnabledIf enabled, will allow the user to pan the map
Loading EnabledIf enabled, will show a loading indicator while the map is being rendered on the screen
Map TypeTo select the type of Map from these options
(standard, satellite, hybrid, terrain, none, mutedstandard)
Auto Cluster MarkersIf enabled, markers will be automatically grouped into clusters based on distance.
Auto Cluster DistanceIf enabled, sets a maximum meter range for marker auto-clustering.

Data Properties

Markers DataYou can pass an Object Array just like a List component in order to render a list of locations on the map using markers
Initial LatitudeThe initial latitude coordinate when the map is first rendered
Initial LongitudeThe initial longitude coordinate when the map is first rendered
Map StyleYou can use a custom JSON to define the Google Map's style (only compatible with 'google' map provider). Style JSON can be created here.

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.


On PressProvides latitude and longitude arguments
On Region ChangeInvoked each time the user moves, zooms, or modifies the region. It works when you stop moving the map and the area changes.