Map

Interactive maps with markers using Leaflet.js

Pro Feature

The Map element requires a Pro or Agency license. Learn about licensing.

Overview

The Map element displays interactive location maps powered by Leaflet.js. Maps are perfect for contact pages, store locators, event locations, or any page that needs to show geographical information.

Maps support multiple markers with custom titles and descriptions that appear in popups when clicked. You can choose from various tile styles, including free OpenStreetMap tiles or premium MapTiler styles like satellite imagery.

Users can interact with maps by dragging to pan and scrolling to zoom. Both behaviors can be disabled for a static map display. Default classes include rounded overflow-hidden for a polished appearance.

Settings

Configure the Map element using these Inspector options:

Setting Description Default
Latitude Map center latitude coordinate. 51.505 (London)
Longitude Map center longitude coordinate. -0.09
Zoom Initial zoom level (1-18). Higher values zoom in closer. 13
Height Map container height in CSS units. 400px
Markers Array of map markers with coordinates and popup content. 1 marker at center
Scroll Zoom Enable zoom via mouse scroll wheel. true
Dragging Enable map panning by clicking and dragging. true
Tile Style Map appearance style. See Tile Styles below. openstreetmap
MapTiler API Key API key required for MapTiler tile styles. (empty)

Tile Styles

Choose from these map appearance options:

Style Description API Key Required
openstreetmap Standard OpenStreetMap tiles. Free to use. No
streets MapTiler Streets - clean, modern street map. Yes
satellite MapTiler Satellite - aerial/satellite imagery. Yes
outdoors MapTiler Outdoors - topographic with trails. Yes
light MapTiler Light - minimal light theme. Yes
dark MapTiler Dark - minimal dark theme. Yes
MapTiler API Key

OpenStreetMap tiles are free and require no API key. For MapTiler styles (streets, satellite, etc.), you need a free API key from maptiler.com. The free tier includes 100,000 map loads per month.

Marker Structure

Each marker in the markers array contains these properties:

Property Description Example
lat Marker latitude coordinate. 51.505
lng Marker longitude coordinate. -0.09
title Popup title displayed when marker is clicked. "Our Office"
description Popup description text. Supports HTML. "123 Main St, London"
iconUrl Custom marker icon URL. Leave empty for default pin. "https://example.com/marker.png"

Examples

Single Location Map

Display a single office or store location with popup information.

{
  "lat": 40.7128,
  "lng": -74.0060,
  "zoom": 15,
  "height": "400px",
  "markers": [
    {
      "lat": 40.7128,
      "lng": -74.0060,
      "title": "NYC Headquarters",
      "description": "123 Broadway, New York, NY 10001<br>Open Mon-Fri 9am-5pm"
    }
  ],
  "tileStyle": "openstreetmap"
}

Map with Multiple Markers

Show multiple locations, such as store branches or event venues.

{
  "lat": 51.509,
  "lng": -0.118,
  "zoom": 12,
  "markers": [
    {
      "lat": 51.5074,
      "lng": -0.1278,
      "title": "Central London Office",
      "description": "Westminster, London"
    },
    {
      "lat": 51.5194,
      "lng": -0.1270,
      "title": "King's Cross Branch",
      "description": "Near the station"
    },
    {
      "lat": 51.5033,
      "lng": -0.1195,
      "title": "South Bank Location",
      "description": "Riverside venue"
    }
  ]
}

Satellite View Map

Use MapTiler satellite imagery for aerial views. Requires API key.

{
  "lat": 48.8584,
  "lng": 2.2945,
  "zoom": 17,
  "tileStyle": "satellite",
  "mapTilerApiKey": "your-api-key-here",
  "scrollZoom": false,
  "dragging": true
}
Finding Coordinates

To find latitude and longitude for a location, right-click on Google Maps and select "What's here?" The coordinates appear in the popup and search bar.

Next Steps