Maps
Embed an interactive map, powered by OpenStreetMap, with no API key.
The Maps block embeds an interactive map powered by OpenStreetMap. There is no Google account, no API key, and nothing billed per view. Reach for it whenever a location needs to be shown in context, a contact page, a studio address, an event venue.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "maps".
- Pick the Maps block.
The block drops in at 500 px tall and full width by default. Adjust those in the design panel.
Settings
In the maps block's own panel. Layout, spacing, and visual styling live in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Address | Street address or place name; the block geocodes it and centres the map there | Any time you want to show a specific location |
| Name | Label shown on the marker | The place has a name worth displaying, a studio, a venue |
| Zoom | How close the map starts, default 14 | 14 is neighbourhood level; pull back to 10 for city-level context, push in to 17 for building-level |
| Style | Map theme: standard, light, dark, or satellite | Match the page palette; satellite for terrain or site photography context |
| Fullscreen control | Adds a fullscreen button to the map | Useful when the embedded map is small but visitors may want a closer look |
| Type control | Adds a layer-switcher button | When visitors may want to toggle between map styles themselves |
| Zoom control | Shows plus/minus buttons on the map | On by default in most map libraries; turn off for a static-feeling embed |
| Scale bar | Shows a distance scale on the map | Helpful when relative distances matter, walking times, neighbourhood radius |
| Street View | Adds the Street View pegman control | Only relevant if the location has Street View imagery |
| Rotate | Enables map rotation gestures | Touch-heavy contexts where visitors may want to reorient the map |
Styling
The maps block uses the shared design panel for dimensions, spacing, borders, and effects. The map itself fills whatever dimensions you set; give the block an explicit height or it collapses. The states panel is available if you want to apply an overlay or transition on hover.
Accessibility
An embedded map is a complex interactive region. Add a descriptive aria-label via the block's HTML attributes panel so screen-reader users know what the map shows before they enter it, for example "Map showing the studio location at 12 Calle Mayor, Madrid". If the map's sole purpose is to show an address, consider also providing that address as plain text nearby so visitors who cannot use the map still get the information.