Clean cards with address, phone, email and a button — and each card carries its own embedded Google Map. No API key, no dependencies, and every colour, font and space is an editor field. On mobile it stacks to a tidy single column.
One module, three completely different looks — and not a line of CSS. Every colour, font, radius and the map itself is a field.
Each card carries its own map, with address, phone, email, opening hours and a button. Light and clean — the default look, restyled only with fields.
Two columns this time, with the map on top of each card and space around it — a Fraunces serif heading, warm cards, a terracotta accent and a soft outline button. The inset, rounded map is just two optional fields.
One location reads as a clean contact card — a wide map on the left, Plus Jakarta Sans, a teal accent, generous padding and a solid button. Same module, a third look.
This page is the demo and the manual. The three sections above are the live module; everything below explains how to build them and what every field does. No external docs to hunt for.
Location Map Pro turns a list of locations into a clean "where to find us" section. Each location is a card with a title, address, phone, email, optional rich text and a button — and its own embedded map. Visitors get a real, pannable map per location plus tappable phone and email links.
It's built for offices, stores, clinics, studios, branches and dealerships — anything with one address or many.
Each card in the Location cards repeater has a title, an optional description, a map address, an optional rich-text block, and a button (label + link).
Inside each card is a second repeater — Detail rows — where you build the lines like address, phone, email or anything else. Each row has its own icon (a HubSpot icon field — pick any Font Awesome icon), an optional label, the text, and an optional link. Add a link and the row becomes clickable: use a phone number for a tap-to-call tel: link, an email for a mailto: link, or any URL. Add as many rows as you need, in any order. The icon size and colour are set once, in Style → Cards.
The map uses Google's public embed endpoint (maps.google.com/maps?q=…&output=embed), not the paid Maps Embed API — so there's no Google Cloud project, no billing card and no key to manage. Put a full address, a place name, or raw lat,lng coordinates in the card's Map address. Each map can be panned and zoomed, and a single toggle turns the map off to leave a clean contact card.
Recolour the map without any styled-map JSON: Full colour, Grayscale, Muted, Dark (night), or a Custom filter (grayscale / contrast / brightness). Optionally turn on reveal full colour on hover — the map fades smoothly from its effect to full colour when the card is hovered (used on demo 2).
Every visible value is a field: card background, radius, border, shadow and hover lift; per-element fonts (title, description, address lines) with their own sizes and colours; detail-icon size and colour; and the button — solid, outline or text-link, with its own font, colours, radius, padding, alignment and an optional icon. The three demos above are the same module in Inter/mono, Fraunces/terracotta and Plus Jakarta Sans/teal — nothing was hard-coded.
tel: / mailto: links, and lazy-loaded map iframes so off-screen maps never block the page.| Field | Where | What it does |
|---|---|---|
| Heading | Content | Optional eyebrow / title / subtitle above the cards. |
| Location cards | Content → Location cards | The repeater. Per card: title, description, map address, button, rich text — and a nested Detail rows repeater. |
| Detail rows | Content → Location cards → Detail rows | Per row: icon, optional label, text, and an optional link (tel: / mailto: / URL). |
| Detail icon size + colour | Style → Cards | The size and colour of every detail-row icon (the icon itself is picked per row). |
| Button icon | Style → Button | Optional icon shown after the button label, plus its size. |
| Base font | Style | One font for the whole module; each element can override it. |
| Layout | Style → Layout | Columns, map position + width ratio, max width, gaps, padding, background. |
| Heading style | Style → Heading | Eyebrow / title / subtitle fonts and the space below. |
| Cards style | Style → Cards | Background, radius, border, padding, shadow, hover, fonts, detail-icon size + colour. |
| Map | Style → Map | Show/hide, height, corner radius, space around, zoom, colour effect, hover reveal. |
| Button | Style → Button | Solid / outline / link, font, colours, radius, padding, alignment, icon size. |