Skip to Content

Add a Google Map to a panel in Jitterbit App Builder

App Builder ships with preformatted HTML/CSS Templates to allow you to quickly add in Google Maps in Street View or Map View, as well as a Template that can be used for adding in LinkedIn content. For the Google Maps Templates, you will need to leverage a Business Object that contains data for Address, City and State. To use one of these templates, your application must have a Collection containing these Templates associated with it. This guide will step you through how to work with Google Map templates in App Builder.

Googlemap

Associate the template collection to your app

  1. From your app, navigate to App Workbench > More > Edge Case
  2. Click App Collections
  3. Click the Register button
  4. From the drop down Collections menu, select Third Party
  5. Click the check mark icon to save the entry

Add a panel and configure Google Maps

  1. Navigate to the page in your App where you want to add the Google Maps panel
  2. Click on the Action Drawer and select Live Designer
  3. Click +Panel and select Form
  4. Click Next
  5. Select a Business Object that contains data in it for Address, City and State. For example: Customer (Source)
  6. Click Next
  7. Select Choose Manually
  8. Click Next
  9. Select a control to add and click Next. For example: Customer
  10. Click Finish
  11. Edit the Panel Name value if you want, this is the Panel name that will display. For example: Customer Map Address
  12. Click Save
  13. Click + Control
  14. Set the Control Type as Template
  15. Provide a Name. For example: Map Address
  16. Click the drop down menu for Template, and select the Google Map template style you want to use. For example: Google Maps Street View By Address Interactive
  17. Click Next
  18. Review proposed information and click Finish
  19. Click the Template Bindings icon, and confirm (or create) entries for Address, City and State mapping the Template Parameter value to the Control or Column Name value

templateparameter.png

You should now be able to navigate to your App and refresh, and see the Google Map panel with the associated map information displayed.