---
title: Add a stylish Google Map to your website with Snazzy Maps in HubSpot
description: Learn how to add a stylish Google Map to your website in HubSpot.
image: https://www.stuff-n-matters.com/hubfs/hubspotted/featured%20images/add-google-maps-with-snazzy.webp
---

[![stuff-and-matters-logo-white](https://www.stuff-n-matters.com/hubfs/sam/stuff-and-matters-logo-white.svg "stuff-and-matters-logo-white")](https://www.stuff-n-matters.com/)

- Focus Theme for HubSpot
  
  Focus Theme for HubSpot

    - [Focus](https://www.stuff-n-matters.com/focus)
    - [Focus Plus](https://www.stuff-n-matters.com/focus-plus)
    - [Focus vs Focus+](https://www.stuff-n-matters.com/focus-plus-comparison)
    - [Client Showcase](https://www.stuff-n-matters.com/focus-plus-theme-client-showcase)
    - [Knowledge Base](https://www.stuff-n-matters.com/focus-theme-knowledge-base)
    - [Documentation](https://www.stuff-n-matters.com/focus-theme-documentation)
    - [Release Notes](https://www.stuff-n-matters.com/focus-plus-theme-release-notes)
    - [Money Back Guarantee](https://www.stuff-n-matters.com/refund-policy)
    - [Cashback Program](https://www.stuff-n-matters.com/focus-plus-theme-cashback-program)
- [Solutions](https://www.stuff-n-matters.com/solutions)
  
  Solutions

    - [HubSpot Onboarding](https://www.stuff-n-matters.com/hubspot-onboarding)
    - [Marketing Automation](https://www.stuff-n-matters.com/marketing-automation-services)
    - [Content Creation](https://www.stuff-n-matters.com/content-and-inbound-marketing)
    - [Inbound Marketing](https://www.stuff-n-matters.com/content-and-inbound-marketing)
    - [HubSpot Integrations](https://www.stuff-n-matters.com/hubspot-integrations)
    - [Website Development](https://www.stuff-n-matters.com/website-design-and-development)
    - [Reporting & Analytics](https://www.stuff-n-matters.com/reporting-and-analytics)
    - [Sales Enablement](https://www.stuff-n-matters.com/sales-enablement)
    - [Service Enablement](https://www.stuff-n-matters.com/customer-service-enablement)
    - [Strategy Consulting](https://www.stuff-n-matters.com/advanced-strategy-consulting)
    - [Retainer-Based Support](https://www.stuff-n-matters.com/retainer-based-support-services)
- [Blog](https://www.stuff-n-matters.com/blog)
- [Career](https://www.stuff-n-matters.com/career)
- [Contact](https://www.stuff-n-matters.com/contact)

[![https://19808513.fs1.hubspotusercontent-na1.net/hubfs/19808513/sam/stuff-and-matters-logo-white.svg](https://www.stuff-n-matters.com/hubfs/sam/stuff-and-matters-logo-white.svg "https://19808513.fs1.hubspotusercontent-na1.net/hubfs/19808513/sam/stuff-and-matters-logo-white.svg")](https://www.stuff-n-matters.com/)

- Focus Theme for HubSpot
  
  Focus Theme for HubSpot

    - [Focus](https://www.stuff-n-matters.com/focus)
    - [Focus Plus](https://www.stuff-n-matters.com/focus-plus)
    - [Focus vs Focus+](https://www.stuff-n-matters.com/focus-plus-comparison)
    - [Client Showcase](https://www.stuff-n-matters.com/focus-plus-theme-client-showcase)
    - [Knowledge Base](https://www.stuff-n-matters.com/focus-theme-knowledge-base)
    - [Documentation](https://www.stuff-n-matters.com/focus-theme-documentation)
    - [Release Notes](https://www.stuff-n-matters.com/focus-plus-theme-release-notes)
    - [Money Back Guarantee](https://www.stuff-n-matters.com/refund-policy)
    - [Cashback Program](https://www.stuff-n-matters.com/focus-plus-theme-cashback-program)
- [Solutions](https://www.stuff-n-matters.com/solutions)
  
  Solutions

    - [HubSpot Onboarding](https://www.stuff-n-matters.com/hubspot-onboarding)
    - [Marketing Automation](https://www.stuff-n-matters.com/marketing-automation-services)
    - [Content Creation](https://www.stuff-n-matters.com/content-and-inbound-marketing)
    - [Inbound Marketing](https://www.stuff-n-matters.com/content-and-inbound-marketing)
    - [HubSpot Integrations](https://www.stuff-n-matters.com/hubspot-integrations)
    - [Website Development](https://www.stuff-n-matters.com/website-design-and-development)
    - [Reporting & Analytics](https://www.stuff-n-matters.com/reporting-and-analytics)
    - [Sales Enablement](https://www.stuff-n-matters.com/sales-enablement)
    - [Service Enablement](https://www.stuff-n-matters.com/customer-service-enablement)
    - [Strategy Consulting](https://www.stuff-n-matters.com/advanced-strategy-consulting)
    - [Retainer-Based Support](https://www.stuff-n-matters.com/retainer-based-support-services)
- [Blog](https://www.stuff-n-matters.com/blog)
- [Career](https://www.stuff-n-matters.com/career)
- [Contact](https://www.stuff-n-matters.com/contact)

[![](https://www.stuff-n-matters.com/hubfs/sam/stuff-and-matters-logo-dark.svg)](https://www.stuff-n-matters.com/)

- Focus Theme for HubSpot
  
  Focus Theme for HubSpot

    - [Focus](https://www.stuff-n-matters.com/focus)
    - [Focus Plus](https://www.stuff-n-matters.com/focus-plus)
    - [Focus vs Focus+](https://www.stuff-n-matters.com/focus-plus-comparison)
    - [Client Showcase](https://www.stuff-n-matters.com/focus-plus-theme-client-showcase)
    - [Knowledge Base](https://www.stuff-n-matters.com/focus-theme-knowledge-base)
    - [Documentation](https://www.stuff-n-matters.com/focus-theme-documentation)
    - [Release Notes](https://www.stuff-n-matters.com/focus-plus-theme-release-notes)
    - [Money Back Guarantee](https://www.stuff-n-matters.com/refund-policy)
    - [Cashback Program](https://www.stuff-n-matters.com/focus-plus-theme-cashback-program)
- [Solutions](https://www.stuff-n-matters.com/solutions)
  
  Solutions

    - [HubSpot Onboarding](https://www.stuff-n-matters.com/hubspot-onboarding)
    - [Marketing Automation](https://www.stuff-n-matters.com/marketing-automation-services)
    - [Content Creation](https://www.stuff-n-matters.com/content-and-inbound-marketing)
    - [Inbound Marketing](https://www.stuff-n-matters.com/content-and-inbound-marketing)
    - [HubSpot Integrations](https://www.stuff-n-matters.com/hubspot-integrations)
    - [Website Development](https://www.stuff-n-matters.com/website-design-and-development)
    - [Reporting & Analytics](https://www.stuff-n-matters.com/reporting-and-analytics)
    - [Sales Enablement](https://www.stuff-n-matters.com/sales-enablement)
    - [Service Enablement](https://www.stuff-n-matters.com/customer-service-enablement)
    - [Strategy Consulting](https://www.stuff-n-matters.com/advanced-strategy-consulting)
    - [Retainer-Based Support](https://www.stuff-n-matters.com/retainer-based-support-services)
- [Blog](https://www.stuff-n-matters.com/blog)
- [Career](https://www.stuff-n-matters.com/career)
- [Contact](https://www.stuff-n-matters.com/contact)

# Add a stylish Google Map to your website with Snazzy Maps in HubSpot

![](https://www.stuff-n-matters.com/hubfs/hubspotted/featured%20images/add-google-maps-with-snazzy.webp)

Adding an interactive map to your website with Google Maps is cool. Doing it in a stylish way is even more cool! This is where [Snazzy Maps](https://snazzymaps.com/) jumps in. It's a free online service that you can create customized Google Maps. There are tons of ready-to-use styles already, so if you wish, you can just pick one that fits your branding and move on.

But how are you going to handle this with HubSpot? The answer is, you must use a HubSpot theme which includes a map module and supports Snazzy Maps.

In this article, we're going to talk about the usage of the Map module in [the most popular theme for HubSpot, Focus](https://theburnhambox-19808513.hs-sites.com/focus). Focus theme for HubSpot is completely FREE to use by the way. Just login your HubSpot account and install it for free. When we're finished, you'll have an awesome map in your website like in the preview image below:

![map-module-preview](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/map-module-preview.png?width=2470&name=map-module-preview.png)

We'll handle this in 3 steps. First we'll get our Google Maps API Key, then we'll create our map with Snazzy Maps and finally we'll add this map into the Map module in our HubSpot theme. So let's get started!

## Get your Google Maps API Key

Google requires a key to let us use the map service. Here's how to get your API key:

1. Visit this page: [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key)
2. Scroll down a bit and click the **Go to the Credentials page** button.
   
   ![google-button-go-to-credentials](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/google-button-go-to-credentials.png?width=300&name=google-button-go-to-credentials.png)
3. Now, if you're able to see the **CREATE CREDENTIALS** button, just click it. If you don't see that button yet, please select a project first and then you'll realize the button.
   
   ![google-button-create-credentials](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/google-button-create-credentials.png?width=500&name=google-button-create-credentials.png)
   
   IMPORTANT NOTE: Google requires a billing account in order to use the map service. You can find more info on this page: [https://console.cloud.google.com/billing](https://console.cloud.google.com/billing)
4. Once you're OK creating your credentials, you'll see a pop-up window that includes your API key. We'll need this key later.
   
   ![google-maps-api-key](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/google-maps-api-key.png?width=500&name=google-maps-api-key.png)
5. It's important to attach the Google Maps service to your API key to ensure that your map will be displayed on your website. To do this, please navigate to **APIs & Services \> Enabled APIs & services** page.
   
   ![google-maps-enable-api-services](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/google-maps-enable-api-services.png?width=600&name=google-maps-enable-api-services.png)
   
   On this page, if you're seeing the **Maps JavaScript API** name in the list, you don't need to do anything. Otherwise, please click the **ENABLE APIS AND SERVICES** button and choose **Maps Javascript API** on the upcoming page.

You can also watch the YouTube video by Google below to learn more about generating your API key:

<iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none;" title="How to generate and restrict API keys for Google Maps Platform" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" xml="lang" src="https://www.youtube.com/embed/2_HZObVbe-g?feature=oembed" width="200" height="113" frameborder="0" allowfullscreen data-mce-src="https://www.youtube.com/embed/2_HZObVbe-g?feature=oembed" data-mce-style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none;"></iframe>

## Create your map with Snazzy Maps

Here's how to create your Google Map with Snazzy Maps:

1. Go to [https://snazzymaps.com/account/register](https://snazzymaps.com/account/register) and register easily.
2. Then visit [https://snazzymaps.com/build-a-map](https://snazzymaps.com/build-a-map) and start creating your Google Map by selecting a style, size & location and an optional marker. We suggest you to keep the default map size (100% width - 600px height).
3. In the **ADVANCED SETTINGS** section, we recommend you to select **Hide all controls** and uncheck **Scroll to zoom** options.
   
   ![snazzy-maps-advanced-settings](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/snazzy-maps-advanced-settings.png?width=400&name=snazzy-maps-advanced-settings.png)
4. When you're done with your styling, click the **Save** button.
   
   ![snazzy-maps-button-save](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/snazzy-maps-button-save.png?width=400&name=snazzy-maps-button-save.png)
5. In the upcoming window, you'll see a field that asking for a Google Maps API Key. Remember the key we got from Google? Copy & paste that key into this field. Don't forget to give your map a name too. And then hit **Save**.
   
   ![snazzy-maps-api-code](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/snazzy-maps-api-code.png?width=400&name=snazzy-maps-api-code.png)
6. Finally, after saving your map on Snazzy Maps, you'll see a code starts with "***\<iframe src…***". If you're not seeing it, please click the **View Code** button. Copy that code and we'll use it in a moment.
   
   ![snazzy-maps-map-code](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/snazzy-maps-map-code.png?width=500&name=snazzy-maps-map-code.png)

## Add your Snazzy Map code into the Map module

We're at the final step! All we have to do now is adding a Map module to our page and then insert the Snazzy Maps code into the related field in the module. Here's how:

1. In your HubSpot account, navigate to **Marketing \> Website \> Website Pages** and click the **Edit** button of the page that you want to add the map onto. Or, just create a new page by clicking the orange **Create** button at the top right of the screen.
2. Drag & drop the Map module onto your page.
   
   ![map-module-drag-drop](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/map-module-drag-drop.png?width=300&name=map-module-drag-drop.png)
3. Paste the Snazzy Maps code you got into the **Map code** field and you're done!
   
   ![map-module-edit](https://www.stuff-n-matters.com/hs-fs/hubfs/hubspotted/blog%20posts/map-module-edit.png?width=300&name=map-module-edit.png)

Congratulations! If you followed all of the steps correctly, you should be seeing your lovely map on your website now. We know, it’s a bit tricky to create a Maps API key especially, but for now, Google wants us to do it in this way. Hopefully they will provide an easier solution to use the map service!

## Need help?

Don't hesitate to use the comments section below for your questions!

### Share:

[Share on Facebook](http://www.facebook.com/share.php?u=https://www.stuff-n-matters.com/blog/add-google-maps-with-snazzy-maps-in-hubspot&utm_medium=social&utm_source=facebook) [Share on LinkedIn](http://www.linkedin.com/shareArticle?mini=true&url=https://www.stuff-n-matters.com/blog/add-google-maps-with-snazzy-maps-in-hubspot&utm_medium=social&utm_source=linkedin) [Share on Twitter](https://twitter.com/intent/tweet?original_referer=https://www.stuff-n-matters.com/blog/add-google-maps-with-snazzy-maps-in-hubspot&utm_medium=social&utm_source=twitter&url=https://www.stuff-n-matters.com/blog/add-google-maps-with-snazzy-maps-in-hubspot&utm_medium=social&utm_source=twitter&source=tweetbutton&text=Add%20a%20stylish%20Google%20Map%20to%20your%20website%20with%20Snazzy%20Maps%20in%20HubSpot)

[themes](https://www.stuff-n-matters.com/blog/tag/themes), [integrations](https://www.stuff-n-matters.com/blog/tag/integrations)

## Comments

## Related posts

Search [How to connect Google Analytics to HubSpot](https://www.stuff-n-matters.com/blog/how-to-connect-google-analytics-to-hubspot)

![stuff-and-matters-provider](https://www.stuff-n-matters.com/hubfs/sam/stuff-and-matters-provider.svg "stuff-and-matters-provider")

We are proudly an official HubSpot Solution Provider. You can grow better with us.

#### Focus Theme

- [Focus](https://www.stuff-n-matters.com/focus)
- [Focus Plus](https://www.stuff-n-matters.com/focus-plus)
- [Focus vs Focus+](https://www.stuff-n-matters.com/focus-plus-comparison)
- [Client Showcase](https://www.stuff-n-matters.com/focus-plus-theme-client-showcase)
- [Knowledge Base](https://www.stuff-n-matters.com/focus-theme-knowledge-base)
- [Documentation](https://www.stuff-n-matters.com/focus-theme-documentation)
- [Release Notes](https://www.stuff-n-matters.com/focus-plus-theme-release-notes)
- [Cashback Program](https://www.stuff-n-matters.com/focus-plus-theme-cashback-program)

#### Solutions

- [HubSpot Onboarding](https://www.stuff-n-matters.com/hubspot-onboarding)
- [Marketing Automation](https://www.stuff-n-matters.com/marketing-automation-services)
- [Content & Inbound Marketing](https://www.stuff-n-matters.com/content-and-inbound-marketing)
- [HubSpot Integrations](https://www.stuff-n-matters.com/hubspot-integrations)
- [Website Design & Development](https://www.stuff-n-matters.com/website-design-and-development)
- [Reporting & Analytics](https://www.stuff-n-matters.com/reporting-and-analytics)
- [Sales Enablement](https://www.stuff-n-matters.com/sales-enablement)
- [Customer Service Enablement](https://www.stuff-n-matters.com/customer-service-enablement)
- [Strategy Consulting](https://www.stuff-n-matters.com/advanced-strategy-consulting)
- [Retainer-Based Support](https://www.stuff-n-matters.com/retainer-based-support-services)

#### Blog Posts

- [How to add custom CSS on HubSpot CMS](https://www.stuff-n-matters.com/blog/how-to-add-custom-css-on-hubspot-cms)
- [How to create a child theme in HubSpot](https://www.stuff-n-matters.com/blog/how-to-create-a-child-theme-in-hubspot)
- [How to connect Google Analytics](https://www.stuff-n-matters.com/blog/how-to-connect-google-analytics-to-hubspot)
- [How to add a Google Map to your website](https://www.stuff-n-matters.com/blog/add-google-maps-with-snazzy-maps-in-hubspot)
- [How to clone a HubSpot theme](https://www.stuff-n-matters.com/blog/how-to-clone-a-hubspot-theme)

**© 2021-2026 Stuff & Matters, Inc.**  
Delaware, USA.

[Refund Policy](https://www.stuff-n-matters.com/refund-policy) [Privacy Policy](https://www.stuff-n-matters.com/privacy-policy) [Terms & Conditions](https://www.stuff-n-matters.com/terms-and-conditions) 

[Follow us on Facebook](https://www.linkedin.com/in/kerem-kandirali/)