How do I add a map in Webflow?

Add the map and connect an API key

The Map element places an interactive Google map on the page. Open the Add panel and drag Map from the Advanced section onto the canvas or into the Navigator.

If the site has no Google Maps API key yet, that element is a gray placeholder on the canvas. Webflow's map article says that without a key the Map element shows a low-resolution map watermarked for development purposes only. A live map needs a key from Google, attached to a Google Cloud billing account.

Create the key on the Google Maps platform. Webflow's article walks through it this way: choose Maps, create a project or pick one you already have, set the billing account, open Keys and credentials, create an API key, enable the API, and copy the key.

Put the key on the site in either of two places. Open Site settings > Apps & Integrations > Google Maps, or select the map, open its settings, and click Add API key. Paste the key into the Google Maps JavaScript API Key field, save, and publish.

Example: the contact page should show the studio at 18 Harbor Street. Drag the map into that section, add the key, publish, then double-click the map, type 18 Harbor Street, and press Enter. The Designer still shows a generic preview. The pin you just set appears on the published site.

Restrict the key to your domains

A key that accepts requests from any site can be used by someone else. Go back to the Google console where you copied the key, click Restrict key, and under Key restrictions choose HTTP referrers (web sites). Enter the domains that should be allowed, including the custom domain and the webflow.io host if you still test there, then save.

You can open the same restrictions later under Keys and credentials, then Credentials, then API keys. Webflow's article says you may also need to enable the API for the project: in the Google console, open Library, click Maps Javascript API, and click Enable. If the console already says the API is enabled, you can skip that step.

Google bills Maps usage on the account you connected. Webflow's map article says its price notes may be out of date and points you to Google's current pricing. Read that page before you publish a key on a busy site.

Set the address, the pin text, and the map type

Double-click the map, type an address or a general place, and press Enter. That address is the pin visitors see after you publish.

Open the rest of the controls from Show all settings on the on-canvas menu, or from the Element settings panel. Three of them change what the map shows:

• Tooltip is the text above the pin, such as North Studio
• Zoom sets how close the map is. 0 shows a wide area. 18 is tight on the address.
• Map type is Road, Terrain, Satellite, or Hybrid

Road with a high zoom is enough for a street address. Satellite helps when the entrance is easier to see from above. Hybrid keeps road labels on that photo.

The map has a default height. Select it, open the Style panel, and set the height and width you want under Size. Position is in the same panel if the map should sit in a column next to the address text. Give the element a class such as Map if you will use the same size on another page.

Decide how scroll and touch behave

Map settings also control what a visitor's scroll does while the pointer is over the map.

Scrollwheel, when it is on, zooms the map with the mouse wheel or trackpad. If someone is scrolling the contact page and the pointer crosses the map, the page stops and the map zooms instead. Turn Scrollwheel off when the map is in the middle of a long page.

Touch drag allows two-finger pan and zoom on a phone. Turn it off when a one-finger drag should keep scrolling the page, not slide the map. Leave it on when the map is the main object on the page and visitors need to move around the neighborhood.

The two switches are independent. A contact page can turn the scroll wheel off and leave touch drag on. Try a trackpad and a phone after you publish.

Publish and check the pin on the live page

The canvas does not show the finished Google map. Publish, then open the live contact page. Confirm the pin is on 18 Harbor Street, the tooltip reads North Studio, and the zoom is close enough to see the block. If you still see a development watermark or a gray area, the key was not saved, the Maps Javascript API is not enabled, or the key's HTTP referrers do not include the domain you are viewing. Fix that in Google and in Site settings, publish again, and reload.

Scroll the page with the pointer over the map. The page should keep moving if Scrollwheel is off. On a phone, drag the page and then try the map, and confirm touch drag matches what you set. If the map is a thin strip, the height in the Style panel is still the default. Set a taller height on the Map class and publish once more.