Usage Documentation for Your Interactive Map Module

Welcome to the Interactive Map Module! This documentation will guide you through the steps to set up and use this module on your HubSpot website or landing pages. Whether you’re looking to add multiple locations, customize the map’s appearance, or enhance the user experience, this guide will cover everything you need to get started.

1. Set Up a Mapbox Account

Before you begin using the module, you’ll need to create a Mapbox account and obtain an API key. Follow these steps:

1. Visit Mapbox: Go to mapbox.com and sign up for an account if you don’t have one.
2. Create an Access Token:
   • Once your account is set up, navigate to the Mapbox dashboard.
   • Click on your profile picture in the upper-right corner and select Account.
   • Under the Access Tokens section, click Create a token.
   • Name your token and set the necessary permissions, then click Create token.
   • Copy the access token provided; you’ll need it later in the module settings.

2. Configuring the Content Tab

The Content tab is where you’ll add locations and configure your map’s behavior. Let’s break down each section:

Adding Locations

When you add a location:

• Automatic Updates: Each location you add will automatically appear as a marker on the map, added to the side panel, and have a pop-up created.
• Configurable Content: For each location, you can configure both the panel content and the pop-up content. This includes adding an image, setting the title and description, and customizing the button properties (such as text and links).

To add a location:

1. Navigate to the Content Tab:
   • Click Add Location to create a new location entry.
2. Panel Content:
   • Here, you can upload an image, add a title, and write a description for the location. This content will be displayed in the side panel.
3. Popup Content:
   • In this section, you can customize the content that appears in the pop-up when the marker is clicked. This includes another image, a title, description, and an optional button with a link.

Configuring Map Settings

In the same Content tab, you can configure how your map behaves and looks when it loads:

1. Add Your Mapbox Access Token:
   • Copy your access token from your Mapbox account and paste it into the Access Token field in the module settings.