Add a Google Map to HubSpot content

Add an interactive Google Map to HubSpot content by copying the map's embed code and inserting it into a rich text module. This method works in the content editor and in templates that support rich text modules. 

Before you get started

Before adding a Google Map to your HubSpot content, review the following requirements and considerations. 

Understand limitations & considerations

• Embedded Google Maps are managed by Google. Display behavior, styling, and functionality depend on Google's embed settings. 

Get the Google Map's embed code

1. Navigate to Google Maps.
2. In the search bar, enter an address. 
3. In the address's listing, click Share.

4. In the dialog box, click the Embed a map tab. 
5. Click the map size dropdown menu and select a size. 
6. Click Copy HTML to copy the map's embed code.

Add a Google Map in the content editor 

1. Navigate to your content:

   • Blog: In your HubSpot account, navigate to Content > Blog.
   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. Click the name of your content. 
3. In the content editor, click the add Add icon in the left sidebar. 
4. Click to expand the Text section, then click the Rich Text module and drag it into position.
5. In the rich text toolbar, click the Advanced dropdown menu and select Source code. 
6. In the dialog box, paste the map's embed code, then click Save. 

7. To take your changes live, click Publish or Update in the top right.

Add a Google Map to a template

If your drag and drop template or coded template doesn't contain a rich text module, add one in the Design Manager. After publishing the template, edit the rich text module in the content editor.

Add a rich text module to a drag and drop template

Add a rich text module to a drag and drop template so the Google Map can be added in the content editor. Learn more about using modules in drag and drop templates. 

1. Navigate to your content:

   • Blog: In your HubSpot account, navigate to Content > Blog.
   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. Click the name of your content. 
3. Click the Settings menu and select Template. 
4. Click Edit this template. You'll be directed to the Design Manager.
5. Click + Add in the inspector. 
6. In the search bar, enter rich text. 

7. Click the rich text module and drag it into position on your template. 
8. In the top right, click Publish changes.
9. Continue adding the Google Map in the content editor.

Add a rich text module to a coded template

Add a rich text module to a coded template so the Google Map can be added in the content editor. Learn more about using modules in coded templates. 

1. Navigate to your content:
   • Blog: In your HubSpot account, navigate to Content > Blog.
   • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
   • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
2. Click the name of your content.
3. Click the Settings menu and select Template.
4. Click Edit this template.
5. In the code editor, add the Rich text module where the map should appear. For example:

{% module
"map_embed"
path="@hubspot/rich_text"
label="Google Map" %}

6. In the top right, click Publish changes.
7. Continue adding the Google Map in the rich text module.