Clean cards with address, phone, email and a button — each card carries its own embedded map. No Google Maps API key, no dependencies, and every pixel is an editor field. The five demos below are all the same module, restyled.
Dark background and cards, Space Grotesk, an indigo accent on the icons and button, and the night-map effect. Same module — only fields changed.
A Fraunces serif heading over an Inter body, warm paper background, terracotta icons, borderless cards and a grayscale map that blooms into color on hover.
Above, below, left or right of the text — per card, from one field. Here: a wide single column, Manrope, a violet accent and a soft outline button.
The traditional directory look — details on top, map underneath. Libre Baskerville headings, a navy accent and crisp square corners for a corporate, law-firm feel.
A DM Serif Display headline, forest-green accent, generous rounded cards and a pill button — the same module dressed as a boutique hospitality brand.
Uses Google's public maps embed — no Cloud project, no billing card, no key to leak. Paste an address and it works.
Each card embeds its own map from its own address. Three cards, three maps — server-rendered, no JavaScript.
Title, description, address, phone and email — each a proper field, with tappable tel: and mailto: links.
Solid, outline or quiet text-link. "Get directions", "Open in Maps", anything — styled once, applied to all.
Colors, fonts, padding, radius, borders, shadows, map effects — light, dark, minimal or branded, all from the editor.
Map top, bottom, left or right; 1–4 columns; map optional. Drops to one column on mobile with no overflow.
Drag "Location Map Pro" onto any page or template, add your locations, and style it in the right-hand panel. No theme files to touch, no code, no add-ons.
The map uses Google's public embed endpoint (maps.google.com/maps?q=…&output=embed), not the paid Maps Embed API. No Google Cloud project, no billing card, no key to create, store or leak. It works the moment you type an address.
Every card renders its own map from its own address — server-side, with no JavaScript. Add three cards and you get three maps. The map bleeds flush to the card edges, like a media card.
Each card's Map address accepts a full street address, a place name (e.g. "Eiffel Tower"), or raw lat,lng coordinates. Leave it blank and the card reuses its visible Address field, so you usually fill in nothing extra.
tel: link.mailto: link.Set the map's look from the editor:
Turn on Reveal full color on hover and the map fades smoothly from its effect to full color when a visitor hovers the card — used on the minimal and branded styles above. It's a single toggle and adds no scripts.
A single Show map toggle. With it off, each location becomes a clean, compact contact card — title, address, phone, email and a button — with no map at all.
One base font drives the whole module; every element inherits it. Then override per element — title, description and the address/phone/email lines each have their own font, size, weight and color, plus controls for the detail-icon and link colors.
Each card's button is solid, outline or a quiet text-link. Control the font, background, hover background, border, text color, radius, horizontal/vertical padding and alignment (left, center, right or full-width). Style it once — it applies to every card.
Set the section's max width, top/bottom and side padding, the gap between cards, the gap between a card's map and its text, and the section background color (with opacity) — so it drops cleanly into any page.
Multi-column grids collapse to a single column on mobile, and any side-mounted map moves to the top of its card. The map height caps on small screens, and there's never any horizontal overflow.
A real heading tag for SEO, semantic tel: / mailto: links, and lazy-loaded map iframes so off-screen maps never block the page. No JavaScript, no libraries, no external dependencies — pure server-rendered HubL + CSS.