マップを埋め込む

概要

ユーザーが位置情報を簡単に確認できるよう、複数のプロバイダーのマップをアプリに埋め込めるようになりました。また、[移動] ボタンを設定して、ユーザーがいる場所から任意の目的地に移動する方法をユーザーに提供することもできます。この例では、Google マップを使用して UiPath Apps にマップを埋め込みます。

ヒント:

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

マップを埋め込む

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 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。「=」の後のテキストを、使用する検索クエリに置き換えてください。

結果

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