PowerApps│BingMapsコネクタで住所からマップ画像を表示する方法

こんにちは、あんこ先生です。

入力した住所から近辺のマップを表示したくないですか？

例えば取引先や顧客管理において、住所だけでなくマップ情報もあると人を派遣しやすくなりますよね。

また、プライベートでも旅行先の記録にマップを付け足すと花があります。

でも標準のマップコントロールは緯度と経度からじゃないと目的地のマップを表示できないんですよね。

ならば住所から緯度経度情報を取得できる外部サービスを使って実装してみましょう！

そこで、今回はBingMapsコネクタを使って住所からマップ画像を表示する方法をコード付きで解説します。

BingMapsコネクタで住所からマップ画像を表示する方法

BingMapsとは

今回紹介するBingMapsとは、Microsoftが提供する地図検索サービスです。

日本の地図としては施設などの情報が少なく、マップは画像なので動的に移動ができません。

扱いにくいですが、概ねこの辺といった使い方なら及第点かなと思います。

最大の利点は無償なのにアプリでマップを扱えるところですね。

BingMapsコネクタを使えるようにする

BingMapsコネクタを接続しようとするとAPIキーを要求されます。

まずはBing maps Dev CenterにアクセスしてAPIキーを取得しましょう。

右上のSign inを押します。

次にYes, let’s create a new accountを押します。

英語はちょっと・・・という方は翻訳しちゃいましょう。

必要事項を埋めてCreateを押せばアカウントが作成されます。

あとはMy account ➡ My KeysからAPIキーを取得するだけです。

Show keyを押せばAPIキーが出てくるので、コピーしておきましょう。

仮に忘れても再発行するまで何度でも確認できるので安心です。

BingMapsコネクタに接続する

コネクタはデータから探していきましょう。

検索するとすぐ見つかりますよ。

BingMapsコネクタを選択するとAPIキーの要求がくるので先ほどのものをコピペします。

これで接続完了です。

BingMapsコネクタを使う

住所から緯度と経度を取得する│GetLocationByAddress

マップを表示するには最低限緯度と経度の情報が必要です。

とはいえ、わざわざ緯度と経度の実数を調べて入力、マップ表示なんてやってられませんよね。

GetLocationByAddressアクションを使えば住所から緯度と経度を取得できます。

ここでいう住所は都道府県から始まるものはもちろん、郵便番号でも返してくれます。

多少誤差はありますが、大目に見てください。

GetLocationByAddressアクションの戻り値は入れ子のあるテーブルです。

扱いやすくするため、ひとまず変数に格納してみましょう。

住所を入力するためのテキスト入力コントロールと変数に格納するためのアイコンを設置して次のコードをコピペしてください。

//アイコンのOnSelect
Set(glbLocation, 
    BingMaps.GetLocationByAddress(
        {
          countryRegion: "JP",             //国　│テキスト
          addressLine: txtAddress.Text     //住所│テキスト
        }
    )
); 

適当な住所を入れてからアイコンを押すと変数glbLocationに値が入ります。

中身を図解するとこんな感じです。

階層が深いですが、実際に使うのは最深部のlatitudeとlongitude列だけなので少し整形します。

With(
    {rec:
        BingMaps.GetLocationByAddress(
            {
            countryRegion: "JP",             //国　│テキスト
            addressLine: txtAddress.Text     //住所│テキスト
            }
        )
    },
    Set(glbLocation, 
        {latitude:rec.point.coordinates.latitude,
        longitude:rec.point.coordinates.longitude}
    ) 
)

これで変数の中身は緯度と経度の2つになります。

マップの画像を表示する│GetMapV2

マップ描画に最低限必要な情報は4つです。

①地図の種類
“Rord”,”Aerial”,”AerialWithLabels”,”CanvasLight”,”CanvasDark”,”CanvasGray”の6種類からひとつをテキストで与えます。
選びやすいよう、ドロップダウンコントロールなどの選択肢にすると便利ですね。

②ズーム
0-21までの数値を与えます。
拡大縮小のたびにコードいじるのも手間なのでスライダーコントロールを使うと便利です。

③緯度
緯度を数値で与えます。
前述の変数から持ってきましょう。

④経度
経度を数値で与えます。
こちらも前述の変数から持ってきましょう。

GetMapV2アクションの戻り値はイメージデータです。

つまりマップは画像なので、表示するためにはイメージコントロールが必要です。

Imageプロパティに次のコードを埋めこんでみましょう。

If(IsBlank(glbLocation),Blank(),
    BingMaps.GetMapV2(
    drpMapStyle.Selected.Value,   //地図の種類│テキスト
    sldZoomLevel.Value,           //地図のサイズ│数値
    glbLocation.latitude,         //緯度│数値
    glbLocation.longitude         //経度│数値
  )
)

マップは表示されましたか？

テキスト入力コントロールの住所を変えてアイコンを押したり、スライダーコントロールの値を変えると再描画されますよ。

色々試してみてください。

一応ピンも立てられますが、非常に見にくいので使いづらいです。

BingMapsコネクタで住所からマップ画像を表示する方法のまとめ

今回はBingMapsコネクタで住所からマップ画像を表示する方法を紹介しました。

描画したマップを動かせないのは残念ですが、住所から緯度と経度を抜けるのは便利ですね。

マップはImageデータなのでリストのImage列にそのまま保存もできますよ。

ボタンを押したら目的地のマップを保存する、といった使い方もできますね。

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ)