The module allows businesses, organizations, or individuals to showcase their physical address, contact numbers, email addresses, and interactive maps. It can be integrated with third-party services like Google Maps to improve accessibility.

Features of the Location With Map :

1. Responsiveness: Fully adaptive to different screen sizes, ensuring a smooth experience on mobile, tablet, and desktop.

2. Typography & Styling: Custom font styles, colors, and alignment options for enhanced design consistency.

3. Displays the physical address with Google Maps.

4. Phone numbers with clickable links for direct calling.

5. Email addresses with mailto links for quick email composition.

How to Set Up the Location With Map Module in HubSpot :

In the main dashboard, go to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages,’ depending on where you want to add the section. This lets you choose the right location for managing or updating your content.

Select the page where you want to apply the module.

Search for "Location With Map" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

For Location With Map, select your preferred layout (e.g., Layout 1 or Layout 2). You can easily rearrange the event cards within the chosen layout to create the ideal content flow and visual arrangement.

Options : 

• Layout 1 : The layout includes a heading along with contact details such as phone number, email, and address, accompanied by a map for easy reference.
• Layout 2 : The layout features a heading and description, with the left column displaying contact details such as phone number, email, and address, alongside a map for easy reference.
  

Heading & Description : 

Easily customize your module's content by modifying the "Heading," "Description," to fit your needs. You also have the option to hide the section, giving you full control over the presentation and functionality.

The "Heading" is displayed in all layouts, while the "Description" is shown only in Layout 2.

Options : 

• Heading & Description Show/Hide Toggle

Column Content : 

Map Add : 

Module Style Options: 

Module Setting :

Adjust the margins, padding, background colors, and container width to achieve your desired look and feel for the module. This flexibility allows you to fine-tune the layout and aesthetics, ensuring a visually appealing and user-friendly design.

Heading & Description Setting :

Users can customize the spacing of the module, as well as adjust the typography for the heading and description. This includes modifying the color, font size, weight, and line height for both mobile and desktop views, allowing for a personalized and visually cohesive design across all devices.

Users can easily customize the row spacing specifically for Layout 1, ensuring a responsive design for both desktop and mobile views. Additionally, they can modify the background color, set the border and border radius, and apply a box shadow to enhance depth and visual appeal, creating a well-structured and visually engaging layout.

Users can easily customize the left column spacing specifically for Layout 2, ensuring a responsive design for both desktop and mobile views. Additionally, they can modify the background color, set the border and border radius, and apply a box shadow to enhance depth and visual appeal, creating a well-structured and visually engaging layout.

Content Setting :

We hope you enjoy using our location with map module to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.