Add a map to pages
Drop the Map block onto a page and paste a Google Maps embed URL or enter a street address under Attr to show an interactive location on your published site—standard iframe embeds do not require a separate API key.
Whether you are guiding clients to a local sunset workshop, pinning the exact location of a remote landscape shoot, or directing visitors to your gallery space, the Map block provides a seamless, interactive layout element for your site.
The Map block uses a secure iframe embed to render on your live, public site. Unlike resource-heavy WordPress themes that rely on complex JavaScript APIs, this approach keeps page loads fast and mobile-friendly.
Prerequisites: Choose your path
Path A: Zero setup (paste a direct embed URL)
Ideal if you only need a one-off map on a specific page and do not want to use the Google Cloud Console.
- Go to Google Maps.
- Search for your location, then click Share.
- Select the Embed a map tab.
- Copy only the source URL inside the
src="..."attribute of the generated iframe snippet. It will look like:
https://www.google.com/maps/embed?pb=!1m18!1m12... - You can paste that URL in the block Attr panel (see below)—no API key required.
Path B: Seamless generation (save a global API key)
Recommended for active workshop hosts and event organizers. Save one developer key in ArtInStack, then generate map embeds from a street address directly in the page editor.
- Open Settings → Integrations → Maps in your dashboard.
- Select Google Maps as your provider.
- Paste your Google Maps Embed API key.
- Pro tip: Enable the Maps Embed API in Google Cloud and add an HTTP referrer restriction for your domain to prevent unauthorized use of your key.
Add the block
- Open Pages → Edit → Page Editor.
- In the right sidebar, click Blocks (plus icon).
- Under Media, drag Map into a column (or let the editor wrap it in Section → Row → Column).
- Save Page and publish when ready.
Configure under Attr
Select the Map block → Edit → Attr:
| Setting | What it does |
|---|---|
| Address or location | Type a natural address (e.g. Mono Lake Tufa State Natural Reserve or 123 Main St, Atlanta, GA) and click Refresh to generate an embed (Path B — requires a saved API key) |
| Or paste embed URL | Paste a raw https://www.google.com/maps/embed?... URL. Takes precedence; works without a saved API key (Path A) |
| Zoom level | Applies when generating from an address (Path B) |
| Map type | Roadmap or satellite |
| Height | Block viewport height (e.g. 400px) to match your layout |
When you use a pasted Google pb= embed URL, zoom and framing come from the export you created in Google Maps—not from the zoom slider.
Looking for the Impact Map? The standard Map block is for a single location on a page. To show a geo-tagged portfolio with pins across regions, use the Impact Map block instead — Add an Impact map to a page.
Troubleshooting
| Symptom | What to check |
|---|---|
| Refresh (generate) is disabled | No API key saved — open Settings → Integrations → Maps, or paste a direct embed URL (Path A) |
| Blank map or Google API warning | Maps Embed API enabled in Google Cloud; HTTP referrer restrictions include your production domain (and localhost while testing locally) |
| Map looks wrong after paste | Re-export from Google Maps Embed a map and paste the full src URL again |
| Block works in editor but not live | Save Page, publish, and test the public URL |
For layout blocks around the map, see Editor blocks and layout reference.
Verifying your setup
- Publish a test page with a Map block.
- Confirm the map loads on the public URL (desktop and mobile).
- If using Path B, change the address in Attr, click Refresh, save, and confirm the embed updates.