CMS-General

Add a Google map to your HubSpot pages

Last updated: October 31, 2018

Applies to:

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Legacy Marketing Hub Basic

To add an interactive Google map to your HubSpot page, you can copy the map's embed code and add it to an HTML module.

Please note: if you already had the map embedded in a Google maps module, you will need to first swap out the old module for an HTML module. Because of changes to Google's API, this module will no longer be supported. 

To swap an existing map module for an HTML module:

  • Download the HTML module from the Marketplace. 
  • In your HubSpot account, navigate to your landing pages or website pages
  • Hover over a page and click Edit
  • Click the Settings tab, then select Advanced options
  • In the Template section, hover over the thumbnail and click Edit template.
  • Click on the existing map module to open the module editor. 
  • In the module editor on the right side, click the module name dropdown menu and select HTML module.existing%20map%20
  • Click Publish changes

If you need to add the HTML module to your template:

  • In your HubSpot account, navigate to your website pages or landing pages.
  • Hover over a page and click Edit
  • Click the Settings tab, then select Advanced options
  • In the Template section, hover over the thumbnail and click Edit template.
  • In the template editor, in the right sidebar, click Add.
  • Use the search bar to search for the HTML module. Drag and drop the module to a position on your template.
  • Click Publish changesadd%20the%20html

Once the HTML module is added to your template, you can add your map to your pages.  

  • Navigate to Google Maps.
  • Use the search bar to search for your address. 
  • Click Share, then select Embed a map.  

search-for-address-in-google-maps-

  • Customize the size, then click Copy HTMLcopy-html
  • In HubSpot, navigate to a website page or landing page.
  • Hover over the page and click Edit
  • Click Edit modules in the left sidebar. 
  • Select the HTML module. Paste the HTML code you copied from Google maps in the HTML field, then click Save and go to module list

paste-the-html-code

  • Click Update in the top right corner to take your changes live.