How to Show Any Address as an Interactive Map in WordPress
Last updated: September 2026
This walks through the video above step by step, with a screenshot for each stage. The result: any card in a Swiffle Grid can flip to reveal a live, interactive map — powered by OpenStreetMap, with no API key to configure. This works entirely on the Free plan.
Step 1 — Add a MAP_ column to your spreadsheet
In your CSV, Excel (XLSX), or Google Sheet, add a column starting with MAP_ (for example MAP_LOCALISATION). This column is flexible — it accepts GPS coordinates («40.6892, -74.0445»), a well-known place name («Eiffel Tower»), or a full street address («1600 Pennsylvania Avenue NW, Washington, DC 20500»). See the Column Reference for the full list of prefixes.
The MAP_LOCALISATION column, filled with three different formats.
Step 2 — Upload your images and spreadsheet
Upload your photos and the spreadsheet file to the WordPress Media Library, the same way as any other Swiffle Grid source.
Images and the XLSX file, ready in the Media Library.
Step 3 — Connect the file to a Swiffle Grid block
Add a Swiffle Grid block, set its Data source to XLSX (or CSV, or Google Sheet), and select your file. The grid renders the front of each card immediately from your data.
The cards rendering from the spreadsheet, map column included.
Step 4 — Adjust the layout however you like.
In the block’s Cards properties, you can adjust many parameters, such as the front‑end image size or the mobile interactions like swipe, flip, and more.
Fine‑tuning the parameters.
ℹ️ The map is powered by OpenStreetMap and Leaflet — no Google Maps API key, no billing account, and no extra setup required.
Result
Click any card, and it flips to reveal a live, interactive OpenStreetMap — pan, zoom, and a marker with the location’s name, generated automatically from the MAP_ column, whichever format it was written in.
The interactive map, revealed on the back of the card.