Map

Combine the power of Google Maps and Webflow's map component to embed an interactive map on your site.

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

Before you get started

Add a map

You can add a map element onto your page from the add elements panel (A) → components section.

If you add a map to the canvas and you don’t have the Google Maps JavaScript API key added to your project settings, you'll see a grey map placeholder.

Other ways to embed maps

You can embed a map in a rich text by pasting the Google map URL in the rich media embed option available in the plus (+) menu that appears when your text cursor is on a new line in the rich text editor. Learn more about rich media.

You can also embed a static Google map directly from the Google maps website. Just grab the embed code and paste it in an embed element on your page. You'll need to change the width and height of the map by updating 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.

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 project.

1. Open the map settings (double-click the map on the canvas or select it and press enter). 
2. Click "Add API key". You'll be taken to your project settings → integrations → Google maps. This is where you’ll paste in your API key for Google Maps.

Generate an API Key

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 Credentials on the left
5. Create Credentials. Choose API Key.
6. Enable the API for the project
7. Copy the API key that is generated

Paste API key into your project

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

1. Go to your project settings → integrations Tab → Google Maps section
2. Paste the API key in the Google Maps JavaScript API Key field
3. Save the changes
4. Publish your site

Restrict your API key

1. Go back to the Google Developer Console (where you copied your API key from)
2. Click restrict key

4. Select HTTP referrers (web sites) under key restrictions
5. Enter your domain(s) under accept requests from these HTTP referrers (web sites)
6. Save your key restrictions

Register your project on Google

You may need to register your project to enable the Maps API. Follow these steps to register your project and 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. Under the maps section of the page, click Maps Javascript API
5. If you see the API enabled indicator, that means you don't have to do anything else.

6. If you see an Enable button, then click it to enable the API for your property.

Need to know — Google Maps Platform API & billing

Customize your map settings

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

If we double-click on the Map, you can type in an address or a general location and press enter. If Google Maps clarifies that address, it will be updated in the Address field.

View settings

You can access more map settings by clicking on Show All Settings in popup modal or by going to the Element Settings Panel. Here 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: 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 - This 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. If you don’t want this behavior, uncheck Scrollwheel.

• Touch drag - This 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.

Style your map

Of course, 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. You can rename your class and apply that same class to other maps you might use in your project.

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