Map

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.

In this lesson

1. Add a map
2. Create an API Key
3. Customize your map settings
4. Style your map

Before you get started

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.

Check out these tutorials to embed maps from various map platforms.

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

You can also access key restrictions under credentials → credentials → API keys. Just click on the API you want to add restrictions to.

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

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.

If you already have map APIs, use the Google Maps Platform Transition Tool to add billing to your existing projects and secure your API keys.

For more info, check out the Google Maps API FAQ page. For support and more questions about the Google Maps API, check out the Google Maps Platform Support and Resources page.

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.