We use cookies to improve our service. Learn more.

Reference / Pages Components

Map Component

Display and interact with maps

The Map component in Glide Pages displays address data as an interactive map on your page.

How to add a Map component

  1. In the Layout Editor, select the page from the Pages panel you want to include a map on.
  2. Click on the plus symbol in the Screen panel.
  3. In the Insert Component panel, select the Map option from the Content section.
Adding a Map component
Adding a Map component

General settings

You can customize your map using the settings available in the General, Options, and Actions tabs that appear when you select the map from the Screens panel in the Layout Editor.

Items Data

  1. In the General tab, locate the Items Data section.
  2. Use the menu in the TitleDescriptionAddress, and Image fields to select the value from your data to display.

You can also type directly into these fields to enter a Custom Value.

Fields for the Map component
Fields for the Map component

A pin is placed on the map at the address specified. The Title, Description, Image, and Address fields all appear in the tooltip that displays when you click on a pin.

Tooltip showing fields when a pin is clicked
Tooltip showing fields when a pin is clicked

Design

  1. In the General tab, locate Design.
  2. Choose the Aspect Ratio - Square, 4:3, or 16:9 - to resize the map on the page.
  3. Choose the Style - Minimal, Standard, or Satellite - to change the appearance of the map.
  4. Choose the Tooltip - Bottom or Floating - to show the details of each location when a pin is clicked.
  5. Select Show Navigation Controls to display buttons that allow users to change the zoom level of the map.
  6. Select Allow zoom with scroll-wheel to give desktop users the ability to change the zoom level with their mouse.
Design settings for the Map component
Design settings for the Map component

Limiting the number of pins on a map

If you only want to show a certain number of pins on your map, you can select the option to limit the number of items. Once this is set, the map will only display the number of pins you enter here, starting at the first available row in your data source.

Limiting the number of pins on a map
Limiting the number of pins on a map

Options settings

You can customize the data displayed on your map by using Conditions. You can also provide users with a search bar to locate specific pins on the map.

Visibility

  1. In the Options tab, locate the Visibility section.
  2. Click the Add Condition button to create your conditions.
Adding conditions to the Map component
Adding conditions to the Map component

Filter Data

  1. In the Options tab, locate the Filter Data section.
  2. Click the Add Filter button to create your filters.

For more information, please see Conditions, Filtering, and Visibility.

  1. Select Show Search bar to allow users to filter the pins on the map using search terms.
  2. Choose a filter in the Show filter field to let users filter the pins on the map based on a specific column value.
Enabling the search bar
Enabling the search bar

Actions settings

You can trigger actions in two areas of the map component - the Title Bar action and the Item Click action.

Title Bar Action

  1. In the Actions tab, locate the Title Bar Action section.
  2. Click the Add primary action button.
  3. Use the menu in the Title field to select the value from your data to display. You can also type directly into this field to enter a custom value.
  4. Select and configure the desired action.

You can add as many actions as you’d like. Additional actions will be displayed as a secondary button or in the dropdown section of the title bar.

Configuring the title bar action
Configuring the title bar action

Item Click Action

  1. In the Actions tab, locate the Item Click Action section.
  2. The Show Detail Screen action is added by default, but you can change this to any other action you choose.

The Item Click Action is triggered when a tooltip is clicked.

Configuring the item click action
Configuring the item click action

For detailed information about all of the actions available in Glide, check out Actions.

Updated 2 weeks ago
Was this helpful?