マップを埋め込む

概要

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 の使用方法について詳しくは、公式ドキュメントをご覧ください。

マップを埋め込む

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

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

   

3. 目的のサイズを選択し、[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 マップ API を使用してマップを埋め込むことをお勧めします。詳しくは、公式ドキュメントをご覧ください。

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

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

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

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

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

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

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".

結果

アプリをプレビューすると、埋め込まれたインタラクティブなマップとボタンが表示されます。[移動] をクリックすると、Google マップが新しいページで開きます。希望の移動手段を選択して出発地を追加すると、設定された目的地までの移動方法が表示されます。