Map
An interactive map widget powered by the Google Maps API
- Guide
- Properties
In this guide:
Specify initial location
Drag a Map component onto the canvas and set an initial location in the Properties panel. You can choose from autocompleted Google results or input the latitude and longitude using the code editor.
Add markers
Add markers as an array of objects, where each object contains a lat, long, and optional title key. For example, [{"lat": 37.9838096, "long": 23.7275388, "title": "Athens, Greece"}].
Trigger actions from markers
Configure the onMarkerClick property to open a slideout or run an API anytime a marker is clicked. Note, you can pass data to the API or component with <MAP_NAME>.selectedMarker. For example Map1.selectedMarker.lat and Map1.selectedMarker.long.
Create dynamic maps
Properties like the initial location and default markers can be configured dynamically based on the result of an API response. For example, here we're using the Clearbit API to fetch geolocation data for a specific company selected in a grid. The map updates depending on which grid cell is selected.
Map Component Properties
| Property | Description |
|---|---|
| Initial Location | Selects location to display (choose from autocompleted Google results or input latitude and longitude) |
| Default Markers | Sets map markers via latitude and longitude |
| Zoom Level | Changes the default zoom percentage of the map |
| Visible | Controls the visibility of the component, values are a boolean |
Map Event Handlers
| Property | Description |
|---|---|
| onMarkerClick | Triggers an action when a marker is clicked |
Map Reference Properties for Components and APIs
Properties can be accessed by adding the name of the Map component, and dot referencing the property. For a Map named Map1:
{{Map1.selectedMarker}} // Object for currently selected marker
{{Map1.markers}} // Array of configured markers
{{Map1.mapCenter}} // Object containing latitude, longitude, and title of configured initial location