Maps

Powered by Mapbox, this widget lets you add a map to your website to show off your physical location(s) or make it easy for visitors to get directions to an event.

To add a map, open the Widgets tab and search for the Map widget.

Drag this widget into the desired location of your editor and it will open the content and design options. In the content tab, type to find your address and select which (if any) devices you want to display a button instead of a map.

Note: if your address isn’t appearing when you search, Mapbox can’t find it; instead try linking a button to a Google Map URL or read on for how to add a Google Map.

You can also use the content tab to customize the location info popup: title, description, and options.

Using the design tab, you can pick from pre-designed map layouts, alter the width and height, as well as make design changes to the popup info.

Add a Google Map

The Without Code map widget uses Mapbox. If you prefer to use Google Maps, you can add this using the HTML widget.

To add this, first open Google Maps:

• Use Google Maps to find your location
• Click on the menu and select “Share or embed map”
• Click on “Embed map”
• Copy the URL after <iframe src =

Then, in the site editor add the HTML widget:

• Open the Widgets tab and search for the HTML widget.

The content and design options will open. In the HTML content section enter this embed code:

<div class=”embed-container”><iframe src=”     ” frameborder=”0″ allowfullscreen></iframe></div>

And add the URL copied from Google Maps after iframe src=”

Enter Developer Mode by selecting the </> icon in the upper right-hand corner. Click on the Site HTML/CSS and enter the following into this section:

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }