Add a Map

Modified on Mon, 30 Mar, 2020 at 12:40 AM

Overview

Show your visitors a map of a specified location. You can use this widget to display the location of your brick-and-mortar business or a special event. You can also use it to show customers where they can find parking.


Guide

Setting up the Map Widget

1. Add the map widget onto your responsive website. To learn more about adding widgets to your website, see Adding Widgets. Once the widget has been placed, the Content Editor will appear.


2. Enter your business address in the text box at the top of the Content Editor.


AddAMap_1_en-US.png


3. Select the address from the dropdown that appears.


AddAMap_2_en-US.png


4.You can choose to display a map button instead of a map image. To display a map button on specific devices, select the device(s) where you want the button to appear. If no devices are chosen, the map image will be displayed.


AddAMap_3_en-US.png


5. Enter the text that you want to appear on the button in the "Text on button" field.


AddAMap_4_en-US.png


Displaying a location info popup

You can also display a location info popup on the map widget. Change the title, description and display options in the Content Editor of the map widget.


AddAMap_5_en-US.png


Design

Open the Design Editor by clicking the design tab on the top left corner to change the map layout, style, and spacing. Edit the design of the map that appears on your website using the layout section. Make changes to the width and height as well as change border styles in the style section. Customize the padding and margins (spacing around the widget) in the spacing section.


FAQs

My address doesn't show up in the drop-down

If your address does not show up in the drop-down, it means we are unable to find it in MapBox's API (sometimes different than their maps search). To get around this problem, try linking a Button widget directly to the map URL in Google Maps instead. If your address is missing from MapBox, you can send a request directly to MapBox to add your address.


Resources

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article