Adding a Google Map to Smart Builder

Follow

Want to show your visitors a physical map of your store location? Or showcase the location of a real estate property on an interactive map?

The Google Maps App in Smart Builder allows you plug in an address and have a map appear directly on your landing page. 

This article will explain how to embed a Google Map into Smart Builder.

  1. Navigate to the Apps tab on the left-hand side of Smart Builder.
  2. Search and locate the Google Maps App.
  3. Click the plus button next to Google Maps to install the app.
  4. Once installed, the Google Maps section template will appear in Smart Builder.
  5. Click on any of the Google Maps templates to apply it to your page:
    Gif demo of a user adding the Google Maps app to their Smart Builder page.

Customizing your Google Map

Now that you have selected your preferred template, you can update the map's address on your landing page.

  1. Update the title of your Google Maps section and the paragraph text.
  2. Single-click on the map in your section, and click the gear icon to launch the Map Settings:
    Google Maps settings section
  3. Within the pop-up that appears, customize the following:
    • Type in the address of the location.
    • If you prefer to show a satellite view of the map, toggle the Sattelite button.
    • Adjust the height and width of your map based on pixel size. 
  4. Click the enter button on your keyboard; the Google Map will update with your custom address and size dimensions: 
    A map of Vancouver in Smart Builder (powered by Google Maps), with a paragraph text of an address & phone number below.

Remember to Save and Publish your page when you're happy with these changes. You can also Preview your page to view the map in real time.