Skip to main content

Map

An interactive map widget powered by the Google Maps API

In this guide:

  1. Specify initial location
  2. Add markers
  3. Trigger actions from markers
  4. Create dynamic maps

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.