How to add a map

With the map element, you can easily add a map section to your website using Google Maps, and you can even place one or more markers on it. In this article, we'll show you how.

Add a map

To add a map section to your website, open the Elements category in the left Content Sidebar and drag and drop the Map element into place. 

Now, you will see a basic map in the Website Builder. By default, the marker on the map will be the address under Data. 

After placing the Map element, you will then find the settings for it on the left. There are several options that you can set here, including the height, level of zoom, scale, and whether zoom controls and mouse wheel are activated.

To enable more settings, you will need to add a Google Maps API key.

Advanced settings with the Google Maps API key

More options become available once you add a Google Maps API key under More > SEO. These include the ability to change the style (many color schemes are available) and type of map (satellite, the default street map, and others), plus the ability to add more than one marker. 

To find your Google Maps API key, follow these instructions from Google. 

Once you have added a Google Maps API key and saved the website, you will see that the advanced style options are available.

• Type:  There are four options available: Street Map (the default), Satellite view, Satellite view with streets, and Terrain map. These types are all compatible, to different extents, with the Style options, allowing you to change the look. The only exception to this is the Satellite view without street labels.
• Style: There are 14 different Style choices for the maps. The Default option is the usual Google Maps color scheme. The Colorize option will allow you to set a series of custom colors to make the map stand out or match your branding colors. If you don't want to go fully custom but want something to match your website, you can choose one of the many other options available which offer other colors, like the dark Midnight Commander style, the light Blue Water style, or the many gray or monochrome styles. There is also a No labels style and an Apple Maps style. 
• New marker: By default, a single marker is added to the map with the company address as the location. But, if there are multiple locations, it may be helpful to also display them on the map. To add another marker, click the + Add button to the right of New marker. Then you can simply add the address and also upload a custom marker image. 

Avoid errors

In order to avoid any errors, please keep the following points in mind:

• Enter your Google Maps API Key under More > SEO
• Make sure that the key you enter is correct - "copy and paste" is usually the safest method
• Give Google valid payment information
• If the location is not displayed correctly, check the address, using Google if necessary
• Clear your browser cache