Embedding an interactive Google map into landing page - is this possible?

Hi everyone, I am currently attempting to recreate our “Contact Us” page on our website and turn it into a HubSpot landing page.

The last piece I am missing is our interactive Google map.

Is it possible to add one to a HubSpot landing page? If so, how would I go about doing this?

I attached an image to show what type of map I am trying to put in.

Thank you,

Matt

Hi @MDePardo,

Great question! Embedding an interactive Google Map into a HubSpot landing page is something a few folks in the community have tackled in different ways.

Tagging some of our regulars who may have done this before: @NancyLambert @albertsg
have any of you embedded a Google Map into a landing page or have an approach you’d recommend here?

And if anyone else in the community has done this, feel free to share in this thread!

Cassie, Community Manager

Hey @MDePardo,
just build something like this a few days ago.

There are many different ways how to embed a Google Map into a page.

The easiest and “non-dev” approach is to simply use a module which has a rich-text option and paste the google maps embed code into the source-code view of it. Save it - done.

Another option (if you’re looking to embed the same map in different places) is to create a super simple global custom module, add a text field (not rich-text) to it and set the map embed code as default - done.

  • text-field (name: Map embed code)

    module.html
    <div class="gmaps-wrapper">
    {{ module.map_embed_code }}
    </div>

There are more complex solutions like utilizing HubDB, Custom Objects and Google Maps API to load different maps dynamically - but as those would be only benificial for dynamic pages (like a “find the nearest shop” or a real estate page), I won’t go into detail on those.

hope this helps

Best,
Anton

Edit:
If you decide to go the non-dev route - it doesn’t even have to be a rich-text, a simple text field would technically be enough. But depending on your theme, there might be special styles attached , which might lead to confusion in the code. Therefore: Rich-text is easier

Anton, thank you so much! i will give this a go