Building a website with store locations or real estate property listings? Then, it's time to add an interactive map to your Webflow website! Interactive maps will enhance both the user interface and experience of your website. Although maps are impressive, it can be intimidating to add this feature. Don’t worry though, it’s not as hard to add a map to your website as you may think.

In this article, we’ll teach you how to add Webflow Google Maps and Jetboost’s CMS Maps Booster to your website. We’ll first look at what you get with Webflow’s native Map element. Then, we’ll explore Jetboost’s CMS Maps Booster, and see how it differs from Webflow maps.

What is Webflow’s Map element?

With Webflow’s Map element, you can add an interactive map to your website with Google Maps Platform. How does it work? Add Webflow’s Map element to your website, create a Google Maps API key, and style your new map.

You can select what address you want your map to display on your published website. You can also choose from four map types: road, terrain, satellite, and hybrid. Additionally, decide how you want the map to behave when a user interacts with your website.

Important: To use Google Maps Platform on your Webflow website, you need a Google Maps API key. To generate your API key, you’ll need to enter your credit card information. Google Maps Platform offers $200 of usage every month for free. Then, you will be charged on a sliding scale based on your usage. If you have questions, you can read more about Google Maps Platform pricing.

How can I use Google Maps with Webflow?

There are many different ways to use a map on your Webflow website! Webflow Google Maps work great if you just need to add a static map to your website for a single location, such as your company headquarters or next event.

If you need to display multiple addresses, like store locations or real estate property listings, on an interactive map, try Jetboost's CMS Maps Booster! CMS Maps integrates directly with your Webflow CMS Collections so you can easily add location data to your map right from your Webflow Collections List. No need to constantly export your location data to a third-party app any time there's a change.

Customize your map with different map styles, map marker images, and map view options. Bonus, it's easy to add CMS Maps to your website! Follow our step-by-step directions with no coding required. 

You can further enhance your map with other Jetboost boosters like Dynamic Filtering and Real-Time, On-Page Search to allow your users to filter the markers in your map. Check out our live demo to see how we did this. Ready to get started? Try Jetboost for free today! Otherwise, if Webflow maps better suits your needs, continue reading on!

How do I add Webflow Google Maps to my Webflow website?

It’s easiest to add Google Maps to your Webflow website with Webflow’s Map element. But, you can also use the Webflow Google Maps Integration. For this tutorial, let’s use Webflow’s Map element.  

Step 1: Add a Map element to your Webflow website. 

Navigate to the “Add Elements (A)” panel. Scroll to “Advanced.” Select “Map.” 

After you add the Map element to your website, you’ll see a gray placeholder with a notice that a Google Maps API key is required to continue.  

Note: You can also use the Rich Text element or Embed element to add a map to your website. Check out Webflow’s Map Guide to learn more. 

Step 2: Generate a Google Maps API key.

To use a live map on your Webflow website, you need a Google Maps API key. 

Double-click on your Map element to display the Map Settings. 

Click “Add API key.”  

This will take you to the Apps & Integrations Settings for your Webflow project. Scroll to “Google Maps.” 

Click the “Google Maps JavaScript API Key” link. 

This will redirect you to the Google Maps Platform. Click “Get Started” and follow the instructions to set up your account. Remember, you’ll need to enter your credit card information to use the Google Maps Platform. 

Once your account is set up, Google Maps will automatically generate your API key. 

Step 3: Copy and paste your API key to your Webflow project. 

Once you generate your API key (wahoo!), navigate to your Apps & Integrations Settings. 

Copy and paste your API key to the “Google Maps JavaScript API key” field.

Save your changes, and publish your website.

Step 4: Enable your API key.

Navigate back to the Google Maps Platform. 

Confirm that “Enable all Google Map APIs for this project” is selected. If you don’t want to enable all Google Map APIs, you can manage your individual APIs from the Google Maps Platform. 

Step 5: Restrict your API key.

Next, click “Go To Google Maps Platform.” You’ll be prompted to restrict your API key to prevent unauthorized use or theft.

Restrict your API key to your website. Then click, “Restrict Key.” 

Now that your API key is all set, it’s time to configure your map.

Step 6: Select your map view settings.

Navigate to your Map Settings on your Webflow website. Add an address that you want to appear on your live map. If you need a map with more than one address, skip ahead to learn more about Jetboost's CMS Maps Booster. 

You can also select the map type (road, terrain, satellite, or hybrid) you want displayed. 

Publish your website to view these changes. 

Step 7: Customize your map behavior settings.

Decide how you want your map to behave when a user interacts with your website. 

Enabling “Scrollwheel Zoom” will cause the map to zoom in and out while users scroll your website or if their mouse enters the map boundary. 

Enabling “Touch Drag” will allow users to pan or zoom on the map with two-finger touch gestures. 

Step 8: Style your Map element.

Of course, you can style your Map element however you want! By default, Webflow adds height to your map, but feel free to make any design changes. 

Publish your website to view changes to your map. 

How do I add Jetboost’s CMS Maps Booster to my Webflow website?

Do you want to add a customizable map with advanced features to your Webflow website? Follow our step-by-step instructions below to add CMS Maps to your website.

Step 1: Set up your Jetboost account.

If you’re not a Jetboost user, sign up for Jetboost for free. Add your Webflow account to Jetboost. Now, start adding boosters! 

Step 2: Add the CMS Maps Booster to your Webflow website.

Navigate to your Jetboost dashboard. Click “Add Booster.” Then, add the “CMS Maps” booster. 

Step 3: Configure your CMS Maps Booster.

Next, sign up for Mapbox for free. After you create your Mapbox account, copy and paste your public API key to Jetboost. 

Then, select your map style. Choose from streets, outdoors, light, dark, satellite, satellite streets, navigation day, or navigation night. If you prefer, you can create a custom map style.

Set your map location and zoom. If you select “automatic,” the map will zoom to fit your CMS items when filtered. Or, select “manual.” For this option, pan the display map to set your initial location and zoom level. 

Next, set your marker image. Copy and paste the asset URL you’d like to use as a marker image. The marker image URL must be a PNG or JPEG. Mapbox does not currently support SVG images. 

Then, select your scale. We recommend a 0.5x scale for retina displays. 

Finally, decide whether you’d like to save the map position (zoom and center) to the URL. This is useful if you want users to be able to share map positions via email, social media, text, etc.   

Step 4: Add the Jetboost script to your Webflow website. 

Navigate to the custom code page in your Webflow Project Settings. Find the “Head Code” section. Paste in the Jetboost script here. If you’re already a Jetboost user, skip this step.

Step 5: Prepare your Collection List for the map.

Before you start this step, ensure that your Collection List has latitude and longitude fields. These are necessary for your map to function. 

Add the provided Jetboost class to your Collection List Wrapper element. 

Then, add an Embed element inside of your Collection Item. Copy and paste the provided Jetboost code to the Embed element. Click “save & close.” You can skip this step if you’ve added the Jetboost Embed to this Collection Item with another booster. 

Navigate to your Collection Item Settings. Select “Custom Attributes.” Click the plus sign to add a new custom attribute. 

Copy and paste the provided Jetboost data attribute for longitude to the “Name” field. For the “Value,” select the longitude field associated with your Collection List. Repeat to add a custom attribute for latitude.  

Publish your website, and test your URL. If there are any issues, we’ll let you know.

Step 6: Create your map container. 

Add a Div Block where you want your map to display on your webpage. Style this Div block however you want! Don’t forget to add height and width. Your map needs to be visible to your users!

Next, add the provided Jetboost class to your Div Block. 

Publish your website, and test your URL again. We’ll let you know if there are any issues. 

Step 7: Final Checks.

If there are no final issues, click “continue.” That’s it!

Ready to add an interactive and customizable CMS-based map to your Webflow website? Get started with Jetboost for free!

Elevate Your Webflow Website with Maps

Interactive maps are both beautiful and useful additions to your Webflow website. From simple to complex use cases, we know your users will love Webflow Google Maps or Jetboost’s CMS Maps!

If you want to add an advanced, customizable map to your website, try Jetboost’s CMS Maps Booster. It’s the easiest way to add complex maps to your Webflow website. CMS Maps integrates directly with your CMS Collections List. There's no need for remote data storage. And of course, there's never any coding with Jetboost. Follow our simple, step-by-step directions to get started today!