Softr Docs
Search…
Map
How to add a Map block to your Softr app
The Map block can be used to display a list of locations from Airtable through a Google Map. Let's see how it's configured.
The feature is available only for Professional and Business plan customers.
Preparing Airtable Data
First of all, you need to have the list of your locations on Airtable. Below is the example data set we're going to use.
Map Data
As you can see, we've added three cities with their respective coordinates, images, and URLs. The Image and URL fields are optional and, if added, will be displayed inside the pop-up that opens when clicking on the location. We'll discuss this in greater detail a bit later.
Setting Up the Map Block
As soon as we have our data, we can proceed to setting up the Map on Softr. So, let's add the block and start configuring it.
Selecting Base and Table
First of all, we need to select the base and table where the map data is stored.
Base and Table selection
Map Options
Title and Subtitle
Here, you can add a Title and Subtitle for the block.
Map API Key
To be able to use the map, you need to create an API key through your Google developer account and add it in your map settings. A detailed guide on setting up the API key can be found here.
Zoom
Here, you define the zoom level of the map. The map can have a different number of zoom levels based on the location, but it’s usually around 21 (i.e. you can enter a decimal ranging from 0 to 21). At the most zoomed out (level 0), the entire map is represented by a single 256x256 px square tile. See how it works below.
Latitude and Longitude
Lastly, we need to select the coordinate fields from our Airtable data we had prepared earlier.
Latitude and Longitude
Marker Option
Finally, you need to configure the map marker. Apart from the Color, you need to define the Title of each location and can also add an Image and URL to be shown inside a pop-up when clicking on the location.
Please note that only the Title field is required for the map to work. Image and URL are optional.
Below, you can see how we configure the marker settings.
Configuring Marker Options
That's it. The map is ready!
Last modified 1mo ago