---
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.lean-freight.com/hubfs/blog-featured-images/add-google-maps-with-snazzy.webp
---

[![Lean Freight](https://www.lean-freight.com/hs-fs/hubfs/0fda2f89-5dfa-4057-871d-f9ff87587f2d.png?width=200&height=122&name=0fda2f89-5dfa-4057-871d-f9ff87587f2d.png "Lean Freight")](https://www.lean-freight.com/)

Search toggle

- [Home](https://www.lean-freight.com)
- [Shop](https://shop.lean-freight.com)
- [Contact](https://www.lean-freight.com/contact)

[![Lean Freight](https://www.lean-freight.com/hs-fs/hubfs/0fda2f89-5dfa-4057-871d-f9ff87587f2d.png?width=200&height=122&name=0fda2f89-5dfa-4057-871d-f9ff87587f2d.png "Lean Freight")](https://www.lean-freight.com/)

- [Home](https://www.lean-freight.com)
- [Shop](https://shop.lean-freight.com)
- [Contact](https://www.lean-freight.com/contact)

Search toggle

[![Lean Freight](https://www.lean-freight.com/hs-fs/hubfs/0fda2f89-5dfa-4057-871d-f9ff87587f2d.png?width=250&height=122&name=0fda2f89-5dfa-4057-871d-f9ff87587f2d.png "Lean Freight")](https://www.lean-freight.com/)

- [Home](https://www.lean-freight.com)
- [Shop](https://shop.lean-freight.com)
- [Contact](https://www.lean-freight.com/contact)

Search

What are you looking for?

Search

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

 10 Sep 2023

![Picture of Kerem Kandirali](https://www.lean-freight.com/hs-fs/hubfs/avatars/kerem-kandirali-avatar-2.jpg?width=40&name=kerem-kandirali-avatar-2.jpg) [Kerem Kandirali](https://www.lean-freight.com/blog/author/kerem-kandirali)

![Add a stylish Google Map to your website with Snazzy Maps in HubSpot](https://www.lean-freight.com/hubfs/blog-featured-images/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. Luckily, all of the HubSpot themes created by [Stuff & Matters](https://www.stuff-n-matters.com/) have this ability.

In this article, we're going to talk about the usage of the Map module in those HubSpot themes: [Focus](https://ecosystem.hubspot.com/marketplace/website/focus-theme-by-stuff-matters-inc) and [Focus Plus](https://ecosystem.hubspot.com/marketplace/website/focus-plus-theme-by-stuff-matters-inc). Focus theme for HubSpot is 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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.com/hs-fs/hubfs/Imported_Blog_Media/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.lean-freight.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.lean-freight.com/blog/add-google-maps-with-snazzy-maps-in-hubspot&utm_medium=social&utm_source=linkedin) [Share on X](https://twitter.com/intent/tweet?original_referer=https://www.lean-freight.com/blog/add-google-maps-with-snazzy-maps-in-hubspot&utm_medium=social&utm_source=twitter&url=https://www.lean-freight.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)

[integrations](https://www.lean-freight.com/blog/tag/integrations), [themes](https://www.lean-freight.com/blog/tag/themes)

![Kerem Kandirali](https://www.lean-freight.com/hs-fs/hubfs/avatars/kerem-kandirali-avatar-2.jpg?width=80&name=kerem-kandirali-avatar-2.jpg)

## Kerem Kandirali

Sharing my HubSpot knowledge combined with 20+ years of experience in design, coding & web technologies.

[kerem@hubspotted.com](mailto:kerem@hubspotted.com)

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

## Comments

## Related posts

![0fda2f89-5dfa-4057-871d-f9ff87587f2d](https://www.lean-freight.com/hs-fs/hubfs/0fda2f89-5dfa-4057-871d-f9ff87587f2d.png?width=150&name=0fda2f89-5dfa-4057-871d-f9ff87587f2d.png "0fda2f89-5dfa-4057-871d-f9ff87587f2d")

Copyright © 2025 Lean Freight FZE LLC. All rights reserved.

[Follow us on Facebook](https://www.linkedin.com) [Follow us on Twitter](https://www.twitter.com)

[Shop now!](https://shop.lean-freight.com) [Contact us](https://www.lean-freight.com/contact)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Kerem Kandirali",
    "url" : "https://www.lean-freight.com/blog/author/kerem-kandirali"
  },
  "dateModified" : "2023-09-11T00:42:05.915Z",
  "datePublished" : "2023-09-10T23:08:55.000Z",
  "headline" : "Add a stylish Google Map to your website with Snazzy Maps in HubSpot",
  "image" : [ "https://www.lean-freight.com/hubfs/blog-featured-images/add-google-maps-with-snazzy.webp" ],
  "mainEntityOfPage" : {
    "@id" : "https://www.lean-freight.com/blog/add-google-maps-with-snazzy-maps-in-hubspot",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://www.lean-freight.com/hubfs/0fda2f89-5dfa-4057-871d-f9ff87587f2d.png"
    },
    "name" : "Lean Freight FZE LLC"
  }
}
```