How to add a Google map to your page?

SOLVE
Highlighted
New Contributor

Hi there,

 

I am new to HubSpot. I have created a page and I would like to add a Google map to my page. It should open in a new tab when someone clicks. Any suggestions on how to do this?

 

Thanks

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Highlighted
Solution
Regular Contributor | Partner

Hey Jason, 

 

The simplest way to add a google map on to your page is by utilizing an embed code from google maps and a HubSpot HTML module. 

 

Simply go to google maps and input the destination you want to show on the map by default and select share. You will have the option to embed a map. 

Google Map embed.png

Choose how large you want the map to display on your page and copy the HTML of the embed code. 

 

copy html.png

 

Got to your page in Hubspot and drag an HTML module where you'll want the map.

 

drag html.png

 

Paste the embed code into the HTML module's content section and apply your changes. This should be all you need to get a google map onto your page.

 

embed.png

 

Hope this helps. 

 

Joe Thompson, Marketing Manager, Kelp Hubspot Specialist

View solution in original post

Highlighted
Solution
Regular Contributor | Partner

The last poster had some good info there.

I would do an intermediate step.

When you get your google map embed code, head over to embedresponsively.com.

Click the tab for google maps.

Enter your google maps embed code you got from google maps.

 

It will kick out a new embed code that acts responsively in any container you put it in, rather than with the default height and width that the google maps embed code comes with, along with the short css snippet to make it work.

 

That new embed code then goes in the HTML module on your hubspot page.

 

Now, when your site viewer looks at the page on different devices your map will automatically be responsive.

 

Good luck!

View solution in original post

3 Replies 3
Highlighted
Anonymous
Not applicable

Hi @jason6 

 

Please have a look at this https://knowledge.hubspot.com/cos-general/how-do-i-add-a-google-map-to-my-hubspot-page Article.

Download HTML module for marketplace it's free of cost: https://marketplace.hubspot.com/products/hubspot/html

Let me know if any questions!

 

Thanks!

Reply
0 Upvotes
Highlighted
Solution
Regular Contributor | Partner

Hey Jason, 

 

The simplest way to add a google map on to your page is by utilizing an embed code from google maps and a HubSpot HTML module. 

 

Simply go to google maps and input the destination you want to show on the map by default and select share. You will have the option to embed a map. 

Google Map embed.png

Choose how large you want the map to display on your page and copy the HTML of the embed code. 

 

copy html.png

 

Got to your page in Hubspot and drag an HTML module where you'll want the map.

 

drag html.png

 

Paste the embed code into the HTML module's content section and apply your changes. This should be all you need to get a google map onto your page.

 

embed.png

 

Hope this helps. 

 

Joe Thompson, Marketing Manager, Kelp Hubspot Specialist

View solution in original post

Highlighted
Solution
Regular Contributor | Partner

The last poster had some good info there.

I would do an intermediate step.

When you get your google map embed code, head over to embedresponsively.com.

Click the tab for google maps.

Enter your google maps embed code you got from google maps.

 

It will kick out a new embed code that acts responsively in any container you put it in, rather than with the default height and width that the google maps embed code comes with, along with the short css snippet to make it work.

 

That new embed code then goes in the HTML module on your hubspot page.

 

Now, when your site viewer looks at the page on different devices your map will automatically be responsive.

 

Good luck!

View solution in original post