マップを埋め込む

概要

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.

ヒント:

Google マップの検索 API の使用方法について詳しくは、[公式ドキュメント](https://developers.google.com/maps/documentation/urls/get-started?hl=ja#forming-the-url)をご覧ください。

マップを埋め込む

1. Googleマップで、共有する住所を検索します。

2. [共有] をクリックして、[地図を埋め込む] タブに移動します。

   

3. Select the desired size and copy the link by selecting COPY HTML.

4. UiPath^® Apps 内の任意のアプリに移動します。

5. IFrame コントロールを追加します。

6. 手順 3 でコピーしたリンクをコントロールの [ソース] フィールドに追加します。<iframe> タグを削除し、引用符を追加します。たとえば、次のようなリンクを使用する必要があります。

"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!2sro"

注: アプリを動的に埋め込むには、Google Maps API を使用してマップを埋め込むことをお勧めします。詳しくは、[公式ドキュメント](https://developers.google.com/maps/documentation/urls/get-started?hl=ja#forming-the-url)をご覧ください。

[移動] ボタンを追加する

1. UiPath^® Apps 内の任意のアプリに移動します。

2. ボタン コントロールを追加します。

3. ボタンの名前を [移動] に変更します。適切なアイコン (車など) をボタンに追加することもできます。

4. [イベント] タブに移動し、ボタンの [クリック時] ルールを編集します。

5. [URL を開く] ルールを追加します。

6. 次の形式を使用して、Google マップから Directions API を追加します。

   "https://www.google.com/maps/dir/?api=1&destination=UiPath+New+York+USA".

結果

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.