When customers can't find your location, they go somewhere else. Adding a Map Widget to your Thryv website gives visitors an interactive map showing exactly where you are, directly on your page, without requiring them to open a separate app or search for your address themselves. For brick-and-mortar businesses, service locations and event venues, a visible, clickable map is one of the simplest ways to turn a website visitor into a customer who actually walks through your door.

This article covers the following:

• What the Map Widget Does
• How to Add the Map Widget and Enter Your Address
• How to Configure the Map Button for Specific Devices
• How to Add a Location Info Popup to the Map
• How to Customize the Map Widget Design
• Frequently Asked Questions

This article covers adding and configuring the Map Widget on your Thryv website. This article does not cover how to add widgets to your website in general. To learn how to add any widget to your Thryv website, see Add Widgets to Your Thryv Website. 

What the Map Widget Does

The Map Widget embeds an interactive map directly on a page of your Thryv website, showing the exact location of your business or event. Visitors can interact with the map without leaving your website. The Map Widget supports three optional features that extend its functionality: a Location Info Popup that displays a custom title and description when a visitor interacts with the map pin, a Map Button that replaces the full map image on selected devices to save screen space, and full design customization through the Design Editor for layout, style and spacing. The Map Widget is powered by the MapBox API, which determines which addresses are searchable during setup.

How to Add the Map Widget and Enter Your Address

Add the Map Widget to a page on your Thryv website using the website editor. To learn how to add a widget to your website, see Add Widgets to Your Thryv Website. Once the Map Widget is placed on the page, the Content Editor panel will open automatically on the right side of the editor.

In the Content Editor panel, click the address search field at the top of the panel and begin typing your business address. A dropdown list of matching addresses will appear below the search field as you type. Click your business address in the dropdown to select it. The map on the page will update to display a pin at the selected address. If your address does not appear in the dropdown, see the What to Do If Your Address Does Not Appear in the Dropdown section of this article.

How to Configure the Map Button for Specific Devices

By default, the Map Widget displays a full interactive map image on all devices. You can configure the Map Widget to display a tappable Map Button instead of the full map image on specific devices, typically mobile phones or tablets, to save screen space for visitors viewing your site on smaller screens. In the Content Editor panel, locate the device selector for the Map Button option. Check the checkbox for each device type (Mobile, Tablet or Desktop) where you want the Map Button to appear instead of the full map image. If no device checkboxes are checked, the full map image displays on all device types.

When at least one device type is selected for the Map Button, a Text on button field appears in the Content Editor panel. Type the label you want to appear on the Map Button in the Text on button field. The text you enter will display on the button as it appears to visitors on the selected device types. When a visitor taps or clicks the Map Button, it opens the map at your business address in the visitor's default maps application.

How to Add a Location Info Popup to the Map

The Location Info Popup is an optional overlay that appears on the map when a visitor interacts with the map pin. The Location Info Popup can display a custom title and description, for example, your business name, event name, or arrival instructions. To configure the Location Info Popup, locate the Location Info Popup section in the Content Editor panel. Enter your desired title in the title field and your desired description in the description field. Use the display options in the Location Info Popup section to control when the popup appears, for example, whether the popup displays automatically when the map loads or only when a visitor clicks the map pin.

How to Customize the Map Widget Design

The Design Editor controls the visual appearance and spacing of the Map Widget on your website. To open the Design Editor for the Map Widget, click the Design tab in the top-left corner of the Content Editor panel. The Design Editor is organized into three sections: Layout, Style and Spacing. Use the Layout section to change the overall arrangement of the map as it appears on your website page. Use the Style section to adjust the width and height of the map and to change the border style around the map. Use the Spacing section to customize the padding and margins, the space between the Map Widget and the surrounding content on the page.

Frequently Asked Questions

What should I do if my address does not appear in the address dropdown?

The Map Widget address search uses the MapBox API to look up addresses. If your business address does not appear in the address dropdown when you type it in the Content Editor panel, the MapBox API does not currently have a record for that address. Two options are available to work around a missing address. First, you can use a Button Widget on your website that links directly to your business location in Google Maps. When a visitor clicks the Button Widget, Google Maps opens with your business location pre-loaded. Second, you can submit a request directly to MapBox to add your address to the MapBox database. Once MapBox adds the address, it will become searchable in the Map Widget address field.

Does the Map Widget work on all devices and screen sizes?

Yes. The Map Widget is designed for responsive websites and adjusts to display correctly on desktop, tablet and mobile screen sizes. To optimize the map experience for visitors on smaller screens, use the Map Button device selector in the Content Editor panel to display a tappable button instead of the full map image on mobile or tablet devices.

What maps provider does the Map Widget use?

The Map Widget uses MapBox as its mapping provider. The address search in the Content Editor panel queries the MapBox API, which maintains its own database of addresses independently from Google Maps. An address that is findable on Google Maps may not always be available in the MapBox API. If your address is not found in the MapBox address search, see the What to Do If Your Address Does Not Appear in the Dropdown section of this article.