Embedding a Map to Your Smart Builder Page

Adding an interactive map to your page is an easy way for your customers to locate your business relative to their location.

This can also encourage your page visitors to remain on your landing page when looking for directions to your business, helping you retain more views and lower bounce rates.

This article will explain how to add a map to your landing page built with Smart Builder, with the help of Unbounce Apps. 

Installing the Map App

1. Navigate to the Apps tab on the left-hand side of Smart Builder.
2. Search and locate the Map App.
   • If you want to add a Google Maps to your page, see this article: Adding a Google Map to Smart Builder.
3. Click the plus button next to Map to install the app.
4. The Map app will appear in the Add tab in Smart Builder.

You can now drag and drop the Map app anywhere on your page. To learn more about drag and drop, see this article: Using Drag and Drop in Smart Builder.  

Adding a Map to Your Page

1. Drag and drop the Map app into a section in Smart Builder. 
2. Click the Set Up an Address button.
3. The Address Settings will appear:
   
4. In the Search Address... field, type your city, location, or business address.
5. Select a location from the drop-down list that appears: 
   
6. Once you've selected the location, click Apply. 
7. The map will appear on your landing page.

To view your map in real-time, toggle the Preview button at the top of Smart Builder. 

To change the title, color, and opacity of the marker (i.e., the pin on your map), click the Marker button at the bottom of your map:

Be sure to Save and Publish your page.