============================================================ TITLE: Interactive Location Map | Customizable Layouts & Features | HubSpot Module TYPE: article VERSION: 3 VERSION_ID: 4152ce18-087b-48ba-8dad-4f8a183cd4bd GENERATED_AT: 2026-02-24T19:48:13.696Z SUMMARY: Discover the Interactive Location Map module, offering customizable layouts and Mapbox integration to enhance your brand's physical presence and engage visitors. AUTHOR: public transportation READING TIME: 11 min WORD COUNT: 2135 KEYWORDS: Interactive Location Map, Customizable Layouts & Features, HubSpot Module, User Documentation SOURCE URL: https://www.xcellimark.com/modules/interactive-location-map ============================================================ KEY TAKEAWAYS: * User Documentation * Ready to transform your site? # 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. * 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. * 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. * 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. * 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. * 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. * 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. * 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. * 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. * 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. * 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. * 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. * 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. ### Tokyo Office Asia-Pacific headquarters coordinating partnerships and regional growth. ### 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. ### West Mall Convenient mall-based store ideal for quick visits and everyday shopping. ### Airport Express Fast-access location designed for travelers and last-minute purchases. ### Midtown East Central city store serving professionals and office workers. ### SoHo Boutique-style store located in a vibrant shopping district. ### Upper East Side Neighborhood-focused store with personalized customer service. ### Brooklyn Center Spacious retail location serving the greater Brooklyn area. ### Queens Plaza Modern retail space easily accessible by public transportation. ### 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. ### Retail Store Locator - No Side Panel ### A simple, clean layout suitable for "Offices" or "Locations." Displays map locations with pop-ups without a side panel. ### City Locator With Floating Cards ### Orlando FL ### Tampa FL ### Daytona Beach FL ### Minimalist Contact Footer ### A subtle, monochrome map for a footer or "Contact Us" block. No side panel, just the map. ## Ready to transform your site? ### Join other companies using our Interactive Location Map module to drive engagement and foot traffic. ### Need a custom implementation? ### Our technical support team is ready to help with your HubSpot setup. ------------------------------------------------------------ ABOUT THIS CONTENT ------------------------------------------------------------ Source: https://www.xcellimark.com/modules/interactive-location-map Author: public transportation This content is provided for informational purposes. Please visit the original source for the most up-to-date information.