HubSpot Map Module

The HubSpot Map Module is a tool that allows website owners to easily embed interactive maps on their websites. It offers a range of features that can enhance the user experience for website visitors, such as custom map styles, customizable info windows, and the ability to add markers and pins to specific locations.

The Map is divided into several sections, including map settings, map markers, and info windows. Each section allows you to customize specific aspects of the map, such as the layout, color scheme, and content. By working with these sections, you can create a map that is tailored to your business’s specific needs and goals.

The Map Module in HubSpot includes a range of features that can help you create engaging and interactive maps for your website. 

These features include:

• Customizable map styles, including color schemes, and markers.
• Ability to add markers, pins, or annotations to specific locations on the map.
• Customizable info windows to display additional information about a specific location on the map.
• Multiple layout support: choose between basic and advanced map layouts.
• Ability to pin multiple locations on the map (requires API key)
• Multiple Map Theme options for advanced layout (requires API key): You can choose between Default, Silver, Night mode, and Retro. 
• Mobile-responsive design and clean UI for easy navigation on any device.
• Zoom and pan functionality for enhanced user experience.

Using the HubSpot Map Module can offer a range of benefits for your website, such as:

• Improved user experience for website visitors.
• Increased conversions for businesses with physical locations.
• Better search engine optimization for websites with embedded maps.
• Integration with other HubSpot tools streamlines workflow and lead generation.
• Customizable design options allow for consistent branding.
• Mobile-responsive design ensures compatibility with all devices.

Setting up the Map Module in HubSpot is a straightforward process that involves adding the module to your website, customizing the map settings and layout, and adding your own location markers and annotations. HubSpot provides comprehensive documentation and tutorials to help you get started with the Map Module quickly and easily.   

Here are the easy steps to install and set up the Map module on your webpage:

• First, log in to your HubSpot account and navigate to the “Marketing” tab.
  
• Click on “Website” in the dropdown menu and select “Website Pages” from the extended menu.

• Select the webpage on which you want to add the map module and click on the “Edit” button. Or, if you want to make a new web page/landing page, then click on the Create button in the top right corner.

• In the module selection menu, search for “Location Finder” and select the module.
  
• Now simply pick the Map module, drag, and drop it wherever you want on your page. You’ll see a new module appear on the page.

• Did you notice the “Layout” dropdown menu on the main settings page? It allows you to customize your map into either of the two layouts that are:
  • Basic: This layout is ideal for businesses with one storefront with great features.
  • Advanced: This layout comes with more elaborated features and allows you to add multiple location pins to your map. 

And we will learn the map module set up in both these layouts separately. Although most of the things might be the same, there are still some settings that differ in both layouts.

In the “Basic” layout settings,  you will see the following dropdown menu.

• In the “Content” menu, you can customize the map’s appearance, add titles and descriptions, and set the location that you want to display on the map.

• The iFrame code can be used to embed the responsive Google Maps on your website. You can generate this code on the Map. ie website.
  
• To set the location of the map, click on the “Location Card” tab and proceed to click on “Content”, enter the address, city, state, or zip code of the location you want to display on the map.
  
• Under the “Content” button, there is also a details button where you can add further details or redirect links to your outset, right on the map!

• Below the “Content” section on the location card, we also have a “Card Position” dropdown where you can choose the position where your location card appears on the map.

• Once you’ve set up the location, click on the “Style” tab to customize the appearance of the map. Here, you can edit the content, map, and location card appearance.
  
• In the “Content” section, you can edit the container, alignments, map title, heading, and description on your webpage.
  
  
• In the “Map” section, you can customize the size and layout of the map.
  

• The “Location card” menu allows you to change the appearance of your location card.

In the advanced layout module settings, you will see these dropdown menus, with each of them working to customize your map addition.

• The “Content” and “Layout” dropdowns are the same in both layouts, so let’s jump straight to the “Location”, “Map” and “Pointer”.
  
• Starting with the “Location” menu. Here, you are required to provide the latitude and longitude coordinates of your location in order for the marker to show up on the map. You can also add your desired button and background image to the map.

• You can also add Buttons to the map that you can customize according to your needs.

• You can also add an image, resize and add alt text to it on your map using the Image menu. This image is visible on your desktop device as well as your tablet.

• Moving onto the “Map” menu, you will get a variety of options to customize your map content, location, and zoom level, as well as the Map Themes.

• Next comes the “Pointer” dropdown where you can edit the map pointer icon as you please. You can also add alt text to your pointer and select the loading speed of your map. You can select from a range of default options or look through the web!

• Moving on, the “Style” section is almost the same as well, with the difference being the “Info Card” instead of a “Location Card”.

• The info card appears on the map when you click on a location. The only thing different from the “Location card” here is the “Alignment menu”, where you can edit the alignment of the text that is displayed on the info card. You can choose between left, right, or center display on both desktop as well as mobile devices.

• After you’ve customized the map settings to your liking, click “Save” to save the changes to your module.

• Finally, publish the changes to your webpage by clicking on the “Publish” button in the top right corner of the page editor.

,

That’s it! Your HubSpot map module should now be live on your webpage, displaying the location(s) you’ve set up.