Add Google Maps in HubSpot Content

Embedding a Google Map in your HubSpot content is a simple way to show your business location, event venues, or service areas directly on your website or landing pages. This guide walks you through each method to add interactive maps to your HubSpot pages, blog posts, and knowledge base articles.

Why Add Google Maps to HubSpot Pages

Using Google Maps inside your HubSpot content improves user experience and helps visitors quickly understand where you are located. It also helps you keep location details consistent across website pages, landing pages, blog posts, and other assets.

With a few steps, you can embed a standard map, a custom Google My Maps layout, or reuse a saved embed across multiple HubSpot templates and pages.

Requirements Before You Embed in HubSpot

Before adding a map to HubSpot, make sure you have:

• A Google account to create or customize your map.
• Access to your HubSpot content tools (website, landing pages, blog, or knowledge base).
• Editing permissions on the HubSpot asset where you want the map to appear.

You do not need a special integration; you will use the Google Maps embed code and place it in your HubSpot layout using a simple module.

How to Get Your Google Maps Embed Code

The first step is to collect the embed code from Google so you can paste it into HubSpot. You can use a standard location map or a custom Google My Maps project.

Get Embed Code from a Standard Google Map

1. Open Google Maps in your browser.
2. Search for the address or place you want to display.
3. Click the Share button in the sidebar or location information panel.
4. Select the Embed a map tab.
5. Choose your preferred map size from the dropdown menu.
6. Copy the HTML iframe code that Google provides.

This iframe code is what you will paste into HubSpot using a custom embed or rich text editor.

Get Embed Code from Google My Maps for HubSpot

If you need a custom map with multiple locations or layers, use Google My Maps and then embed it into HubSpot.

1. Go to Google My Maps and sign in.
2. Create a new map or open an existing one that you want to display in HubSpot.
3. Set visibility to Public or Unlisted so visitors can view it.
4. In the map menu, click the three-dot icon and choose Embed on my site.
5. Copy the iframe embed code.

Now that you have the embed code, you are ready to place the map inside your HubSpot content.

Add Google Maps to HubSpot Website or Landing Pages

You can embed a Google Map to a specific page or template using the drag-and-drop page editor in HubSpot.

Embed a Map in a Single HubSpot Page

1. In your HubSpot account, navigate to Marketing > Website > Website Pages or Landing Pages.
2. Hover over the page where you want the map and click Edit.
3. In the page editor, locate the area of the layout where the map should appear.
4. Add a Rich text module or a Custom HTML / Embed module to that section.
5. Click into the module and select the Insert or Source code option, depending on the module type.
6. Paste the Google Maps iframe code you copied earlier.
7. Apply your changes and click Update or Publish to make the map live.

This method is ideal when you only need the map on one HubSpot page and want to quickly embed it without updating templates.

Add a Google Map to a Reusable HubSpot Template

If you want the same map across many HubSpot pages, you can add the embed to a template using the design tools.

1. Go to Marketing > Files and Templates > Design Tools in HubSpot.
2. Open the drag-and-drop template used for the relevant pages.
3. Locate the section where you want the map to appear.
4. Drag a Rich text or Custom HTML module into the template layout.
5. Edit the module and switch to the HTML or source view.
6. Paste your Google Maps iframe embed code.
7. Save the module, then click Publish or Publish changes to update the template.

All HubSpot pages using that template will now display the embedded Google Map without additional manual updates.

Use Google Maps in HubSpot Blog Posts

You can also add location maps to HubSpot blog posts to highlight offices, event venues, or travel routes.

1. In HubSpot, navigate to Marketing > Website > Blog.
2. Choose your blog and click Create or edit an existing post.
3. In the post editor, place your cursor where the map should appear.
4. Add a Rich text module if needed, or use the main content editor.
5. Click the code or HTML icon to open source editing.
6. Paste the Google Maps iframe embed code directly into the HTML view.
7. Apply the changes and Update or Publish the blog post.

The map will render inside the blog body, giving readers a clear visual reference without leaving your HubSpot site.

Insert Maps into HubSpot Knowledge Base Articles

If you use the HubSpot Service Hub knowledge base, you can embed maps in articles to explain locations, office visits, or in-person services.

1. Go to Service > Knowledge Base in your HubSpot account.
2. Create a new article or open an existing one to edit.
3. Within the article editor, click where the map should appear.
4. Select the option to insert or edit HTML, or use an embed module if available.
5. Paste your Google Maps iframe embed code into the HTML area.
6. Preview the article to confirm the map displays correctly.
7. Save and Publish or Update the article.

This helps customers see directions and locations while reading help documentation hosted in HubSpot.

Edit or Remove Embedded Maps in HubSpot

You can always edit or remove a map later from the HubSpot editor where it was originally placed.

• Open the page, blog post, or article in the appropriate HubSpot tool.
• Locate the module that contains the Google Maps iframe.
• Edit the HTML to adjust width, height, or map location, or replace the iframe with new code.
• To remove the map entirely, delete the iframe snippet from the module.
• Save and publish changes so the updates go live.

This flexibility allows you to keep your HubSpot content up to date when addresses or locations change.

Best Practices for Google Maps in HubSpot

• Use responsive sizes: Adjust width and height values in the iframe or use percentage-based widths so maps look good on mobile inside HubSpot layouts.
• Check permissions: If using Google My Maps, ensure your map is publicly viewable so it displays correctly within HubSpot pages.
• Test on multiple devices: Preview the HubSpot page on desktop and mobile to confirm the map is easy to interact with.
• Keep content focused: Place the map close to contact details, directions, or venue descriptions for a clear user journey.

Reference and Further Help for HubSpot Maps

For the original platform instructions on adding Google Maps in HubSpot content, visit the official help article here: Add a Google map to HubSpot content.

If you need expert assistance optimizing your HubSpot site, you can work with professionals who specialize in implementation and SEO strategy at Consultevo.

By following the steps in this guide, you can embed interactive location information throughout your HubSpot pages, blogs, and knowledge base, improving navigation and clarity for every visitor.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`