Skip to content
English
  • There are no suggestions because the search field is empty.

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

  1. Open any page in the HubSpot editor.
  2. Search for Interactive World Map in the module panel.
  3. 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.