Apps
latest
false
Embed Maps - Automation Cloud latest
Banner background image
logo
Apps User Guide
Last updated Feb 19, 2024

Embed Maps

Overview

You can embed maps from multiple providers in your app to provide users with an easy way to reach your location.You can also configure a Navigate button to offer users directions on how to get from their location to a destination of your choice.For the purpose of this example, we will use Google Maps to embed maps into UiPath Apps.

Tip:

For more information on how to use Google Maps search APIs, check the official documentation.

Embed map

  1. On Google Maps, search the address you want to share.

  2. Click Share and go to the Embed a map tab.
    docs image
  3. Select the desired size and copy the link by clicking COPY HTML.

  4. Go to your desired app in UiPath Apps.

  5. Add an IFrame control.

  6. Add the link copied at Step 3 in the Source field of the control. Make sure to remove the <iframe> tags from the link. For example, a link should look as follows:

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1511.2061413255587!2d-73.9796223417571!3d40.75295602669006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2590199a4c12d%3A0x35c4d69dd805cc5e!2sOne%20Vanderbilt!5e0!3m2!1sen!2sro!4v1674472555170!5m2!1sen!2srohttps://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1511.2061413255587!2d-73.9796223417571!3d40.75295602669006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2590199a4c12d%3A0x35c4d69dd805cc5e!2sOne%20Vanderbilt!5e0!3m2!1sen!2sro!4v1674472555170!5m2!1sen!2sro
Note: To dynamically embed apps, we recommend using the Google Maps API to embed maps. For more information, check the official documentation.

Add Navigate button

  1. Go to your desired app in UiPath Apps.

  2. Add a Button control.

  3. Rename the button to Navigate. You can also add an appropriate icon to the button, such as a car.

  4. Go to the Events tab and edit the Clicked on rule for the button.

  5. Add an Open Url rule.

  6. Add the Directions API from Google Maps using the following format:

    https://www.google.com/maps/dir/?api=1&destination=UiPath+New+York+USA. Replace the text after = with your search query.

Result

When previewing the app, the embedded interactive map and button are displayed.If you click Navigate, a new Google Maps page is opened. You can select your desired means of transportation and add your starting point for instructions on how to get to the configured destination.

  • Overview
  • Embed map
  • Add Navigate button
  • Result
Support and Services icon
Get The Help You Need
UiPath Academy icon
Learning RPA - Automation Courses
UiPath Forum icon
UiPath Community Forum
Uipath Logo White
Trust and Security
© 2005-2024 UiPath. All rights reserved.