Power Apps カスタムコネクタからGoogle Maps APIを使用して地図の予測候補を出す｜Mapへの表示も

Power Appsにて地図アプリを作ることになったので、Tipsをメモ。

Google Maps APIのキーを取得
カスタムコネクタの作成
Power Apps作成
おまけ：地図コントロールへの表示

Google Maps APIのキーを取得

まずはAPIキーの取得から。

Google CloudのAPIサービスのページに移動して、[APIとサービスを有効にする]から、

「Places API」を選ぶ。※新しいバージョン「Places API（新規）」も出てるけど今回は旧バージョンを使用

[有効にする]を選んで、

「手動で有料アカウントにアップグレードするまで請求は発生しません。」を信じてクレカを登録。
※大丈夫だと思うけど請求が発生しても責任はとれないので、自己責任でお願いします。

無事APIキーが発行されるので、このキーをメモしておく。
※厳重に管理してください。

カスタムコネクタの作成

続いてカスタムコネクタの作成。[一から作成]を選んで、

[全般]設定で[ホスト]に「maps.googleapis.com」を入力、

[セキュリティ]で[認証なし]を選択する。

※ほんとはAPIキーで作りたいんだけど、[クエリ]を選択してもなぜかクエリにAPIキーが含まれないので、いったん断念。

続いて[定義]の[新しいアクション]でアクションを作成し、[全般]でいい感じの名前を付ける。

[要求]の[サンプルからのインポート]で、「GET」を選んでURLに、
https://maps.googleapis.com/maps/api/place/textsearch/json?query=XXX
を入力し、インポート。

[query]パラメータの[編集]を選んで、

「必須」にチェックする。

続いて左下の方にある[新しいポリシー]を押して、

以下のように設定し、TextSearchが呼ばれるときにAPIキーが設定されるようにする。

最後に[応答]の[既定の応答を追加する]から、本文に以下の応答のサンプルを入力する。

// ※結果が多すぎるときは「next_page_token」が返ることもあるが、今回は考慮しない
{
    "html_attributions": [],
    "results": [
        {
            "formatted_address": "Tokyo, Japan",
            "geometry": {
                "location": {
                    "lat": 35.6764225,
                    "lng": 139.650027
                },
                "viewport": {
                    "northeast": {
                        "lat": 36.4408483,
                        "lng": 141.2405144
                    },
                    "southwest": {
                        "lat": 34.5776326,
                        "lng": 138.2991098
                    }
                }
            },
            "icon": "XXX",
            "icon_background_color": "#7B9EB0",
            "icon_mask_base_uri": "XXX",
            "name": "Tokyo",
            "photos": [
                {
                    "height": 3024,
                    "html_attributions": [
                        "XXX"
                    ],
                    "photo_reference": "XXX",
                    "width": 3024
                }
            ],
            "place_id": "XXX",
            "reference": "XXX",
            "types": [
                "administrative_area_level_1",
                "political"
            ]
        }
    ],
    "status": "OK"
}

これでコネクタの作成は完了。

[テスト]から[新しい接続]を選択し、

接続を追加。

テストを実行すると無事値が返ってくる

Power Apps作成

アプリを作成し、カスタムコネクタを追加。

検索窓とボタンを用意して、OnSelectで変数に結果を代入。

ギャラリーを追加してItemsプロパティに「変数名.results」を入力、

名前と緯度経度を表示するように設定。

アプリを実行すると結果が表示される。

おまけ：地図コントロールへの表示

地図に表示する際はMapのItemsプロパティにこんな感じの式を入れてあげて、

ForAll(result.results,
    {
        name:ThisRecord.name,
        lat:ThisRecord.geometry.location.lat,
        lng:ThisRecord.geometry.location.lng,
        address:ThisRecord.formatted_address
    }
)

ItemsAddressとかItemsLabelsとかのプロパティに、以下のプロパティ名を指定する。