Skip to main content


An interactive map widget powered by the Google Maps API

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.

Map components are powered by Google Maps so typing in a location's name will show autocompleted results
Populate a location on a map with an object including its latitude, longitude, and title

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"}].

Add markers to a map using an object containing latitude, longitude, and an optional title

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 and Map1.selectedMarker.long.

Use event handlers to trigger actions, such as running an API, when a user clicks on a marker within the map

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.

Use the Clearbit API to dynamically fetch geolocation data for a specific company when a user selects it on a map

Dynamically update the geolocation data populating a map within a slideout based on the selection of the cell within a grid

Map Properties

Component Properties

Initial LocationSelects location to display (choose from autocompleted Google results or input latitude and longitude)
Default MarkersSets map markers via latitude and longitude
Zoom LevelChanges the default zoom percentage of the map
VisibleControls the visibility of the component, values are a boolean

Settable Properties

Property Via Form / Via RunJSTypeExample Value
Center / center{lat: number, long: number}{lat: -34.3, long: 150.6}
Markers / markersArray<{lat: number, long: number, title?: string}>[{lat:-34.397, long:150.644, "title":"Test A"}]
Selected Marker / selectedMarker{lat: number, long: number}{lat:-34.397, long:150.644}

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Map component, and dot referencing the property. For a Map named Map1:

Map1.selectedMarkerReturns an object of the selected marker with lat, long, and title
Map1.markersReturns an array of objects of the markers on the map
Map1.mapCenterReturns an object of the center of the map with lat and long
Map1.centerReturns an object of the center of the map with lat and long
Map1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)


The following events are triggered by user interactions with Map components. Use event handlers to trigger actions in response to user events.

onMarkerClickTriggers an action when a marker is clicked