Skip to main content
All CollectionsWebsites by BLAB
Widgets: Map
Widgets: Map

Show your visitors a map of any location you like. Use the Map widget to show the location of your brick-and-mortar business or a special event. You can also use it to show customers where they will find parking.

Justin avatar
Written by Justin
Updated over a week ago

Widget Categories: Business

For information on adding widgets, see Add Widgets.

Tip

Fore more information on widgets and the widgets library, see Widgets: Library and Overview.

Google Maps as Default Map Provider

Mapbox is the default map provider for the Map widget. However, you can make Google Maps the default map provider for all new and existing sites in your account. In addition to the Map widget, Google Maps will become the default in all location search and maps for the Content Library and other applicable widgets.

All location data from Mapbox is saved and applied to Google Maps. This ensures you do not need to set up locations again.

Note that this feature can only be enabled by staff members with pro settings permission.

To set Google Maps as your default map provider:

  1. In your Google Maps account, generate an API key. To learn how to generate an API key, see Google’s documentation. We recommend you review Google's Usage and Billing policy.

  2. (Optional) If you set up your Google account so that the API key can only be used on specific websites, you need to add duda.co, your site domain, and if applicable, any white label domains to the list of allowed websites in your Google Account. It is important to use the following format for your domains: *.blab.co/*

  3. From your Dashboard, click your avatar in the upper right corner and select Account.

  4. On the Account Settings page, scroll down to the Google Map Integration section and click Set Up.

  5. Paste your API key in the field, then click Apply to All Sites. This makes Google Maps the default map for all existing and new sites in your account.

At any time, you can disable Google Maps and switch back to Mapbox. All location data from Google Maps will be saved and automatically applied to Mapbox when you switch.

Content Editor

To access the content editor, right click the widget and select Edit Content. Or, if you are in flex mode or Editor 2.0, the option to access the content editor is available in the floating menu.

Map Setup Options

  • Type your business address in the field provided.

    • Select the address from the drop-down that appears.

Note

If your address does not show up in the drop-down, it means the HERE database that Website Builder uses does not contain the address. To submit or correct the address, contact HERE Map Creator.

When using Google Maps for the default provider, see Google's documentation, Add a missing place to Google Maps.

  • You can choose to display a map button instead of a map image.

    • To display a map button on specific devices in the Classic editor, select the Use button on devices where you want the button to appear. If no devices are chosen, the map image will be displayed.

    • In Editor 2.0, the button can be enabled for all devices. To enable the button, click the Set as Button on All Devices toggle.

  • Type the text that you want to appear on the button in the Text on button field provided.

  • Location info Popup (Info Window for the map marker). To display a location information popup on the map widget:

    • Type a title and description for the popup.

    • Select to display the popup On hover, On click, or Always from the Popup display drop-down.

Design Editor

To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode or Editor 2.0, select Edit Design from the floating menu to open the design panel.

Click the Layout tab to edit the design of the map that appears on your site.

For information about design options that are not specific to this widget (for example, layout, style, or spacing), see Widget Design.

Embed a Google Map Using an HTML Widget

To embed maps from Google Maps using the HTML widget:

  1. Navigate to Google Maps.

  2. Search for the location you want.

  3. Click on the menu on the top left, then click Share or embed map.

  4. Click the Embed map tab.

  5. Copy the URL in the quotes after <iframe src =". Make sure to copy the complete URL nested in the quotes.

    24517231685911-mapsembed3_en-US.png

  6. Navigate to your site and, in the left panel, click Widgets, and drag the HTML widget into a row or column.

  7. Use the following embed code and add the URL you obtained from Google Maps in the quotations after iframe src=:

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

  8. Go into Developer Mode.

  9. Click Site HTML/CSS, and then click site.css.

  10. Embed the following CSS 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%; }

    24517236362135-mapsembed6_en-US.png

    The map will resize appropriately for the different device views. If you use the normal Google Maps embed code, the size of the map widget will appear static on all devices and will cut off in the mobile view.

    24517236408343-mapsembed7_en-US.png
Did this answer your question?