---
title: Location Map Pro — Locations Map Module for HubSpot (No API Key)
description: A clean, fully-styleable locations module for HubSpot CMS. Every card has its own map — no Google Maps API key. Address, phone, email and a button per card. Light, dark, minimal or branded. Zero dependencies.
---
[](https://www.nopethemes.com?hsLang=en) [Get the module →](https://ecosystem.hubspot.com/marketplace/website)
HubSpot CMS Module
# Every location, with its own map.
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.
[Get it on the HubSpot Marketplace](https://ecosystem.hubspot.com/marketplace/website) [See it in action](https://www.nopethemes.com/location-map-pro#demo1)
**No** Google Maps API key **No** dependencies **Responsive** **WCAG** friendly
One module, three completely different looks — and not a line of CSS. **Every colour, font, radius and the map itself is a field.**
Demo 1 — Three cards · Inter · gray icons
## Three locations in a row
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.
### San Francisco
West Coast HQ
535 Mission Street, Suite 1500
San Francisco, CA 94105
[+1 (415) 555-0100](tel:+14155550100)
[sf@example.com](mailto:sf@example.com)
**Mon–Fri** 9:00 – 18:00
Free visitor parking on Beale St
[Get directions](https://maps.google.com/?q=535+Mission+Street+San+Francisco)
### New York
East Coast office
200 Park Avenue, 22nd Floor
New York, NY 10166
[+1 (212) 555-0140](tel:+12125550140)
[ny@example.com](mailto:ny@example.com)
**Mon–Fri** 8:30 – 17:30
Entrance on E 45th Street
[Get directions](https://maps.google.com/?q=200+Park+Avenue+New+York)
### London
European office
30 St Mary Axe
London EC3A 8BF, UK
[+44 20 7555 0199](tel:+442075550199)
[london@example.com](mailto:london@example.com)
**Mon–Fri** 9:00 – 18:00
Nearest tube: Aldgate
[Get directions](https://maps.google.com/?q=30+St+Mary+Axe+London)
Two cards · serif · inset map
## Two cards, side by side
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.
### Paris
Flagship
12 Rue de Rivoli
75004 Paris, France
[+33 1 55 55 01 90](tel:+33155550190)
[paris@example.com](mailto:paris@example.com)
**Open** Tue–Sun 10:00 – 19:00
[Plan your visit](https://maps.google.com/?q=12+Rue+de+Rivoli+Paris)
### Milan
Showroom
Via Montenapoleone 8
20121 Milano, Italy
[+39 02 5555 0150](tel:+390255550150)
[milan@example.com](mailto:milan@example.com)
**Open** Mon–Sat 10:00 – 19:00
[Plan your visit](https://maps.google.com/?q=Via+Montenapoleone+8+Milano)
One card · sans · teal
## A single location as a contact card
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.
### Headquarters
Open Monday to Friday
1 Ferry Building
San Francisco, CA 94111
[+1 (415) 555-0100](tel:+14155550100)
[hello@example.com](mailto:hello@example.com)
**Hours:** Mon–Fri 9:00 – 18:00, Sat 10:00 – 14:00. Validated parking in the Embarcadero garage.
[Get directions](https://maps.google.com/?q=1+Ferry+Building+San+Francisco)
Documentation
## Everything you need to set it up
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.
[What it does](https://www.nopethemes.com/location-map-pro#doc-what) [Quick start](https://www.nopethemes.com/location-map-pro#doc-start) [The cards](https://www.nopethemes.com/location-map-pro#doc-cards) [The map](https://www.nopethemes.com/location-map-pro#doc-map) [Map effects](https://www.nopethemes.com/location-map-pro#doc-effects) [Layout](https://www.nopethemes.com/location-map-pro#doc-layout) [Style & branding](https://www.nopethemes.com/location-map-pro#doc-style) [Responsive & accessible](https://www.nopethemes.com/location-map-pro#doc-a11y) [Field reference](https://www.nopethemes.com/location-map-pro#doc-fields) [FAQ](https://www.nopethemes.com/location-map-pro#doc-faq)
---
## What it does
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.
**1–12 locations**A repeater field — add as many cards as you need.
**No API key**Uses Google's public embed — no Cloud project, no billing.
**No JavaScript**Pure server-rendered HubL + CSS. Nothing to load.
---
## Quick start
- Drag **Location Map Pro** onto any page or template.
- Add your locations in **Content → Location cards**. Inside each card, add **Detail rows** (icon + text + optional label/link) for the address, phone, email and so on.
- Type each location's address into **Map address** (or leave it blank to reuse the visible address).
- Style it in the right-hand panel. That's it — no theme files, no code.
---
## The cards & detail rows
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 — no API key
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.
---
## Map effects
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).
---
## Layout
- **Columns** — 1 to 4 cards per row (the three demos are 3, 2 and 1).
- **Map position** — each card's map above, below, left or right of its text, with a width ratio for the side layouts.
- **Space around the map** — flush to the card edge by default, or inset with its own corner radius (demo 2).
- **Spacing** — max width, gap between cards, text padding, top/bottom padding and section background.
---
## Style & branding
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.
---
## Responsive & accessible
- Multi-column grids collapse to a single column on mobile, and any side-mounted map moves to the top of its card.
- A real heading tag for SEO, tappable `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.
---
## Field reference
| 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. |
---
## FAQ
Do I need a Google Maps API key?
No. The map uses Google's public embed endpoint — no Cloud project, no billing card, no key. You can still pan and zoom each map.
Does it work on any theme?
Yes. Every style is a module field, so it looks right on any HubSpot CMS theme out of the box.
How many locations can I add?
1 to 12, in a repeater. A single location reads as a clean contact card; several lay out in 1–4 columns.
Can I turn the map off?
Yes — a single toggle. With it off, each location becomes a compact contact card.
Can I change the icons and fonts?
Yes. Every detail row has its own HubSpot icon field (pick any Font Awesome icon), the button icon is a field too, and the fonts are font fields — the module loads whatever Google font you pick.
Will it slow my page down?
No. It's server-rendered HTML + CSS with no JavaScript or libraries, and the map iframes are lazy-loaded.
Location Map Pro
## Drop in your locations. Ship today.
One clean, keyless, dependency-free module for every 'where to find us' section you'll ever build in HubSpot.
[Get Location Map Pro](https://ecosystem.hubspot.com/marketplace/website)
No Google Maps API key · No dependencies · Works in any HubSpot theme
[](https://www.nopethemes.com?hsLang=en) Location Map Pro · Studio Nope [Get the module](https://ecosystem.hubspot.com/marketplace/website)