Interactive World Map Standard HubSpot CMS Module
Setup and configuration guide
Overview
The Interactive World Map module displays a Google GeoChart map on your HubSpot pages with coloured regions, tooltips on hover, and up to 10 highlighted locations. It's ideal for showing office locations, service areas, customer distribution, or market presence.
Best for: "Where we operate" pages, global presence visuals, location-based landing pages, and customer success stories by region.
Getting Started
- Open any page in the HubSpot editor.
- Search for Interactive World Map in the module panel.
- Drag it onto your page and click to configure.
Field Reference
Map Configuration
| Field | What it does |
|---|---|
| Map Region | The geographic area to display. Choose "World" for a global view. |
| Map Height | Height in pixels. Width is always 100%. Default: 500px. |
| Show tooltips on hover | When ON, hovering over a highlighted region shows its label and value. |
Map Regions (Repeater — up to 10 regions)
| Field | What it does |
|---|---|
| Region Code | ISO 3166-1 country code (e.g. US, GB, DE, FR, AU, BR, JP). |
| Tooltip Title | The name shown in the tooltip when hovering. |
| Value | A value or description shown in the tooltip (e.g. "Active", "320M users", "HQ"). |
Common Region Codes
| Code | Country | Code | Country |
|---|---|---|---|
| US | United States | DE | Germany |
| GB | United Kingdom | FR | France |
| CA | Canada | AU | Australia |
| BR | Brazil | IN | India |
| CN | China | JP | Japan |
| MX | Mexico | SG | Singapore |
Map Colours
| Field | What it does |
|---|---|
| Active Region Colour | The fill colour for highlighted regions. |
| Inactive Region Colour | The fill colour for regions without data. Default: light grey. |
| Map Background | The background colour behind the map. |
Example Configuration
| Region Code | Tooltip Title | Value |
|---|---|---|
| US | United States | HQ — San Francisco |
| GB | United Kingdom | EU Office — London |
| DE | Germany | DACH Region |
| AU | Australia | APAC Hub — Sydney |
| SG | Singapore | Southeast Asia |
Tips
- Country codes: Use 2-letter ISO codes. Search "ISO 3166-1 alpha-2" for a full list.
- Responsive: The map automatically resizes when the browser window changes.
- Multiple maps: Place several map modules on one page — e.g. one global, one zoomed into Europe.
- Performance: The Google Charts library loads only when the module is on the page.
Upgrading to Pro
Need more than 10 regions, click actions, markers, state/province-level detail, or a clickable region list? See the Interactive World Maps Pro module.