One Interactive Map Module.
Infinite Possibilities.
The Interactive Location Map module gives you total control over how your brand's physical presence is experienced.
Explore our most popular layout configurations below.
User Documentation
Overview
The Interactive Location Map is a premium HubSpot module designed to showcase multiple locations in a responsive, highly customizable interface. It supports Mapbox integration, multiple layout modes, advanced card styles, and granular design control.
Map Configuration
Basic settings to initialize the map include:
- Mapbox Access Token: Your public key from Mapbox.com. (Required)
- Map Style: Choose the visual theme of the map tiles.
Options: Streets, Outdoors, Light, Dark, Satellite, Satellite + Streets. - Center Latitude / Longitude: The starting coordinates of the map.
- Initial Zoom Level: From 0 (World view) to 22 (Street level).
- Module Layout: Controls the module's structural arrangement.
- Standard: Full-width map. Markers show popups on click. No side panel.
- Side Panel Left: List of location cards on the left, map on the right.
- Side Panel Right: Map on the left, list of location cards on the right.
- Floating Cards: Cards overlay the map canvas. Best for immersive layouts.
- Location Card Style: Controls the look of the location item cards (Panel / Floating layouts).
- Standard (Image Top): Large image, title, description, and CTA button.
- Simple: Text-only, clean, and minimal.
- Minimal: Compact title only. Ideal for long lists.
- Glassmorphism: Translucent, blurred background. Best to use with Floating Cards.
Style Options
Granular design controls organized by element.
- Primary Accent Color: Controls buttons, active card borders, and highlights.
- Font Family: Inherits your theme font or allows manual selection.
- Map Height: Set different heights for Desktop and Mobile (e.g., 600px / 400px).
- Border Radius: Rounds the corners of the main map container.
- Enable Shadow: Adds depth with a subtle drop shadow.
- Grayscale Mode: Displays map tiles in black & white for minimal or dark designs.
- Location Card Background: Controls card color and opacity (Side Panel layouts).
- Card Padding: Internal spacing inside each location card.
- Card Radius: Roundness of individual location cards.
- Popup Background: Background color of the map popup tooltip.
- Popup Text Color: Text color inside the popup.
- Popup Radius: Roundness of the popup bubble.
Locations
Add as many locations as needed. Each location includes:
- Title: Name of the location (e.g., "New York HQ").
- Description: Rich text content for address, hours, or additional details.
- Location Image: Image displayed in the side panel card or map popup.
- Coordinates: Latitude and Longitude used to place the marker on the map. (Required)
- Custom Marker Icon: Optional icon to override the default marker for this location.
- Button (CTA): Button text (e.g., "Get Directions") and destination link.
Interaction Settings
Controls how users interact with the map.
- Enable Scroll Zoom: Allows zooming with the mouse wheel.
Default: Off (prevents accidental zoom while scrolling the page). - Enable Drag Pan: Allows users to drag and move the map.
Default: On.
Map Configuration
Basic settings to initialize the map include:
- Mapbox Access Token: Your public key from Mapbox.com. (Required)
- Map Style: Choose the visual theme of the map tiles.
Options: Streets, Outdoors, Light, Dark, Satellite, Satellite + Streets. - Center Latitude / Longitude: The starting coordinates of the map.
- Initial Zoom Level: From 0 (World view) to 22 (Street level).
- Module Layout: Controls the module's structural arrangement.
- Standard: Full-width map. Markers show popups on click. No side panel.
- Side Panel Left: List of location cards on the left, map on the right.
- Side Panel Right: Map on the left, list of location cards on the right.
- Floating Cards: Cards overlay the map canvas. Best for immersive layouts.
- Location Card Style: Controls the look of the location item cards (Panel / Floating layouts).
- Standard (Image Top): Large image, title, description, and CTA button.
- Simple: Text-only, clean, and minimal.
- Minimal: Compact title only. Ideal for long lists.
- Glassmorphism: Translucent, blurred background. Best to use with Floating Cards.
Style Options
Granular design controls organized by element.
- Primary Accent Color: Controls buttons, active card borders, and highlights.
- Font Family: Inherits your theme font or allows manual selection.
- Map Height: Set different heights for Desktop and Mobile (e.g., 600px / 400px).
- Border Radius: Rounds the corners of the main map container.
- Enable Shadow: Adds depth with a subtle drop shadow.
- Grayscale Mode: Displays map tiles in black & white for minimal or dark designs.
- Location Card Background: Controls card color and opacity (Side Panel layouts).
- Card Padding: Internal spacing inside each location card.
- Card Radius: Roundness of individual location cards.
- Popup Background: Background color of the map popup tooltip.
- Popup Text Color: Text color inside the popup.
- Popup Radius: Roundness of the popup bubble.
Locations
Add as many locations as needed. Each location includes:
- Title: Name of the location (e.g., "New York HQ").
- Description: Rich text content for address, hours, or additional details.
- Location Image: Image displayed in the side panel card or map popup.
- Coordinates: Latitude and Longitude used to place the marker on the map. (Required)
- Custom Marker Icon: Optional icon to override the default marker for this location.
- Button (CTA): Button text (e.g., "Get Directions") and destination link.
Interaction Settings
Controls how users interact with the map.
- Enable Scroll Zoom: Allows zooming with the mouse wheel.
Default: Off (prevents accidental zoom while scrolling the page). - Enable Drag Pan: Allows users to drag and move the map.
Default: On.
Corporate Directory
A professional, clean layout suitable for "Our Offices" or "Global Presence" sections. Uses a side panel for navigation and corporate branding colors.
New York Office
Global headquarters serving as the main hub for executive leadership, sales, and strategic operations.
London Office
European regional office supporting international clients and cross-border initiatives.
Berlin Office
Innovation-focused office driving product development and engineering efforts.
Retail Store Locator
A functional, high-utility layout for "Find a Store." Uses a right side panel and compact, simple cards.
Downtown Store
Flagship retail location offering the full product lineup and in-store services.
Airport Express
Fast-access location designed for travelers and last-minute purchases.
Immersive Travel Experience
A high-impact, visual layout for "Destinations" or "Resorts." Uses floating glassmorphism cards over a satellite map.
Bali
A tropical destination known for lush landscapes, beaches, and cultural immersion.
Phuket
An island escape offering crystal-clear waters and luxury seaside experiences.
Boracay
Famous for its white-sand beaches and crystal-clear waters in the heart of the Philippines.
Ha Long Bay
Iconic limestone karsts rising from emerald waters, offering unforgettable scenic cruises.