AvantaHub Blog

How to Embed Google Maps into Your HubSpot Website

Written by Team | May 25, 2023 7:16:31 PM

‘It looks cool’; that’s what we first feel when we see a Google Map embedded on a web page though it has many core business benefits. Embedded Google Maps offer several benefits to a HubSpot website, enhancing user experience and providing useful functionality.

Users can view maps, satellite imagery, and even street view, allowing them to explore and understand the surroundings. By embedding Google Maps on your website, you provide users with a convenient tool to find their way to your business or any other destination of interest.

Including a Google Map with your business location on your website can enhance credibility and trust. It reassures visitors that your business has a physical presence and helps them visualize the proximity to their own location.

To obtain the embed code for Google Maps, follow these steps:

  • Go to Google Maps in your web browser.
  • Enter the desired address or location in the search bar.
  • Locate the address listing and click on the "Share" option.

 

A dialog box will appear with different sharing options. Click on the "Embed a map" tab.

  • You will see a dropdown menu in the dialog box for selecting the map size.
  • Choose the desired size from the options provided.
  • After selecting the size, the embed code will be generated automatically. To copy the code, click on the "Copy HTML" button.

 

For HubSpot Blog, website, or landing page:

Log in to your HubSpot account and navigate to Marketing > Website > Blog.

Log in to your HubSpot account and navigate to Marketing > Website > Website Pages.

Access your HubSpot account and go to Marketing > Landing Pages.

  • Locate the specific Blog Post, Landing Page, or Website Page you want to edit and click the "Edit" option.
  • Within the content editor, search for "rich text" in the sidebar editor's search bar.
  • Select the rich text module from the options and drag it to the desired position in your content.
  • Click the "Advanced" dropdown menu in the rich text toolbar and choose "Source code."
  • A dialog box will appear. Paste the embed code for the Google Map into the dialog box.
  • Click "Save" to apply the changes to your blog post, landing page, or website page.