Map

Combine the power of Google Maps and Webflow’s Map element to embed an interactive map on your site.

The Map element lets you embed an interactive map to your site via the Google Maps API. You can specify the location to highlight and choose from various display options.

How to add a map

You can add a map element to your page from the Add panel (A) > Advanced section. 

If you haven’t already added a Google Maps API key to your Site settings, the map you add to the canvas will appear as a gray map placeholder.

Other ways to embed maps

You can embed a map in a rich text element or rich text field using rich media.

You can also embed a static Google map directly from the Google maps website by copying the embed code and pasting it in a custom code embed.

To change the width and height of the map, you’ll need to update the code itself. You can set both to 100%, then apply any width and height values to the Embed element in the Style panel to get the desired dimensions.

How to create an API key

In order to use a live map on your website, you’ll need to create and connect an API key to your site.

Go to the Google Maps platform, click Get started, and follow the instructions to generate your API key:

1. Choose Maps
2. Create a new project or use the dropdown to choose a project you’ve already created
3. Set your Google Cloud Platform billing account
4. Click Keys & credentials on the left
5. Click Create credentials and choose API key
6. Enable the API for the project
7. Copy the API key that is generated

How to add the API key to your site

Now that you’ve got your API key copied to your clipboard, you need to add it to your site:

1. Open Site settings > Apps & Integrations > Google Maps section or select your map on the canvas, open the map settings, and click Add API key
2. Paste the API key in the Google Maps JavaScript API Key field
3. Save your changes
4. Publish your site

How to restrict the API key

1. Return to the Google Developer Console (where you copied your API key)
2. Click Restrict key
3. Select HTTP referrers (web sites) under Key restrictions
4. Enter your domain(s) under Accept requests from these HTTP referrers (web sites)
5. Save your key restrictions

How to register your site on Google

You may need to register your site to enable the Maps API:

1. Go to the Google Developer Console
2. Select the property that you want to enable the API for
3. Click on the Library tab on the left sidebar
4. Click Maps Javascript API
5. Click Enable to enable the API for your property

Google Maps Platform API & billing

As of March 1, 2025, Google introduced a new pricing model for their Maps API. Google no longer provides a $200 USD Google Maps Platform credit for each billing account.

Instead, Google provides 10,000 free monthly requests per Core Service SKUs, including Geocoding. Any usage above this threshold is billed according to Google’s pricing structure.

Learn more about Maps JavaScript API usage and billing.

For more information, check out the Google Maps API FAQ. For support and more questions about the Google Maps API, check out Google Maps platform support and resources.

How to customize your map settings

The Map element will show a generic preview of your map on the Webflow canvas, but you can view the actual map on your published site.

To set a default address, double-click on the Map, type in an address or general location, and press Enter.

View settings

You can access more map settings by clicking on Show all settings in the on-canvas modal menu or in the Element settings panel. With these settings, you can control the specific way your map will appear and behave. You can set the following:

• Tooltip — specify the text that will appear above your Map pin for your location
• Zoom — set the magnification level of the map. 0 will show a larger area while 18 will zoom in on the location you have set.
• Map Type — choose between four types of maps (i.e., Road, Terrain, Satellite, or Hybrid)

Scroll and touch settings

You can also choose how your map will behave when someone interacts with it in Element settings panel > Map settings. 

• Scrollwheel — enables or disables scrollwheel zooming on the map. If you’re scrolling down a page and your mouse happens to land inside the map boundary, scrolling movement on a scrollwheel or trackpad will cause the map to zoom in and out.
• Touch drag — enables or disables two-finger touch gestures like pan and zoom on the map on touch devices. Unchecking this checkbox prevents you from accidentally moving around in the map as opposed to using your finger to move around on the actual page.

How to style your map

You can style a Map element to adjust its behavior and position. It’ll have some height by default, but you can put in your own values for size and positioning in Style panel > Size and Style panel > Position. 

To see how your map appears, publish and visit your site.