Add a Map

  • Knowledge Base
  • Responsive Website Builder
  • Add a Map
  • Duda Support > Responsive Website Builder > Editing a Site

Overview

Show your visitors a map of any location you like. Use this 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.

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.

addamap1.png

3. Select the address from the dropdown that appears.

addamap2.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. 

addamap3.png

5. Enter the text you'd like to appear on the button in the Text on button field.

addamap4.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.

addamap5.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.

Embed a Google Map using an HTML Widget

You can also embed maps from Google Maps. Here are instructions on how to add a map embed using the HTML widget.

  1. Navigate to Google Maps.
  2. Search for the location you want.mapsembed1.png
  3. Click on the menu on the top left, then click the "Share or embed map" option.mapsembed2.png
  4. Click on 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.mapsembed3.png
  6. Navigate to a Duda site and add the HTML widget into a row or column.mapsembed4.png
  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>mapsembed5.png
  8. Go into Developer Mode.
  9. Click on Site HTML/CSS, then click on the site.css option.
  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%; }mapsembed6.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. mapsembed7.png

FAQs

My address doesn't show up in the dropdown

If your address does not show up in the dropdown, 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 Mapbox Maps instead.

Resources

 

×

Priority Phone Support

English phone support is available 18 hours a day,
Monday through Friday, 3am to 9pm (EST).

United States +1 866-776-1550 3am to 9pm (Eastern)
United Kingdom +44 (0)800-011-9071 8am to 2am (London)
France +33 (0)9-75-18-84-74 9am to 3am (Paris)
Israel +972 (0)3-720-8922 10am to 4am (Jerusalem)
Australia +61 (0)2-8880-9166 7pm to 1pm (Sydney)
To schedule a call in French, Portuguese, Hebrew or Russian, please email us at prioritysupport@duda.co
×

Please Log in as a DudaPro

Priority Phone Support is available exclusively to DudaPros. Log in to your DudaPro account now to see our international support numbers.

Log In
Not a DudaPro? Start a free trial now!