Combine the power of Google Maps and Webflow's map component to embed an interactive map on your site.
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Transcript
This video features an old UI. Updated version coming soon!
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.
To use the map element, you'll need a Google Maps API key. Keyless maps return low-resolution maps watermarked with “for development purposes only.” Learn more below.
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.
Select the property that you want to enable the API for
Click on the Library tab on the left sidebar
Under the maps section of the page, click Maps Javascript API
If you see the API enabled indicator, that means you don't have to do anything else.
If you see an Enable button, then click it to enable the API for your property.
Need to know — Google Maps Platform API & billing
DISCLAIMER: The info in this section may not be accurate. Please, read Google's documentation (links in this section) for more up-to-date info.
Google Maps Platform introduced a new pay-as-you-go pricing model — in effect starting July 16, 2018 — for their map APIs. For each billing account, a $200 USD Google Maps Platform credit is available each month. This gives you 28,000 free page loads per month. Usage above that will be billed 0.007 USD per map load for the first 100,000 map loads. Learn more about Maps JavaScript API usage and billing.
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.
This is a generic preview — 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.