【Power Apps マップコントロールで地図表示編】ホットペッパーグルメのキャンペーン店舗一覧からGoogle Maps APIで評価を取得してPower Appsで表示する

2023.09.29

ホットペッパーグルメでは、たまに下記のようなキャンペーンが実施されています。

個人的に幹事をすることが多いので、このようなキャンペーンでの予約を積極的に狙っています。

しかし、キャンペーン対象店舗の検索が弱く、対象店舗はGoogleでの評価もイマイチなことが多いので毎回店選びに時間がかかっていました。

このキャンペーン対象店舗かつGoogle評価が高い店舗を調べる作業を自動化したので、3回に分けて解説します。

Power Automate for desktopで対象店舗名を取得
Power Automate for cloudでGoogle MapsのAPIを用いて評価等を取得
Power Appsで可視化（今回）

準備
1. 前回
2. マップと住所サービスを有効にする
マップ表示の作り方
カスタマイズ
まとめ

準備

前回

前回までで、Power Automate for cloudを使って店名の一覧からGoogle Maps APIを用いて、評価、評価数、住所、緯度、経度を取得することが出来ました。

今回は緯度、経度を取得してPower Appsのマップコントロールで表示します。

マップと住所サービスを有効にする

Power Platform管理センター→環境→任意の環境→設定→機能→マップと住所サービスより、完全のトグルをオンにします。

利用のためには利用規約への同意が必要です。

マップ表示の作り方

挿入→メディア→マップで画面にマップコントロール（プレミアム）を追加します。

Itemsプロパティに前回までで用意したExcelを指定します。

Items~というプロパティがいくつかあるので、それぞれにExcelの列名を記入します。

ItemsAddresses	"住所"
ItemsLabels	"店名"
ItemsLatitudes	"緯度"
ItemsLongitudes	"経度"

プロパティを設定すると、地図に青い丸が表示されました。

拡大すると、地図上にピンと店名が表示されています。

今回は銀座や豊洲エリアに絞っていましたが、目視でそれ以外の場所にピンが設定されていたのが30件、検索結果0のため空白のセルが30件程度ありました。

店名が正確でないものがほとんどだったため（頭に【9/20オープン！】がついているなど）、正確性を求める場合は電話番号などで検索すべきかもしれません。

カスタマイズ

店名以外の情報を表示する

フィールド→フィールドの選択から列を選択した追加します。

なぜがピンが消えました。

コレクションにExcelのテーブルを格納し、コレクション（ColMap）をデータソースとすると表示されるようになりました。

評価・評価数でフィルター

評価と評価数でフィルターがかけられるようにします。余談ですが、評価数フィルター機能はGoogleマップアプリでも欲しいです。

画面に評価コントロールとスライダーコントロールを追加します。

マップコントロールのItemsプロパティを以下に変更します。

Filter(
    ColMap,
    Value(評価) >= Rating1.Value,
    Value(評価数) >= Slider1.Value
)

既定の場所を使用（DefaultLocation）をtrueに設定し、既定の緯度を35.681236、既定の経度を139.767125、既定のズームレベルを12に設定します。

この設定をしないとItemsの再計算のたびに位置が再計算されてしまいます。

うまくフィルター処理をすることが出来ました。

評価で色分け

マップコントロールのItemsプロパティを以下の数式に変更します。

AddColumns(
    Filter(
        ColMap,
        Value(評価) >= Rating1.Value,
        Value(評価数) >= Slider1.Value
    ),
    "Color",
    If(
        Value(評価) < 3,
        Color.DarkRed,
        Value(評価) < 4,
        Color.Blue,
        Color.Green
    )
)

ItemsColorsプロパティに、追加した"Color"列を設定します。