PowerAppsには標準機能として地図を表示させる機能はありませんが、標準の画像表示コントロールを応用することで、地図を表示することが可能です。今回は、Bing Maps や Google Maps で利用されている、Bing Maps Imagery API と Google Static Maps API を活用して、PowerAppsに地図を埋め込んでみたいと思います。

地図を利用する場面

これから4回に分けて、画像コントロールを使用して、以下の利用シーンを想定した方法をご紹介します:

  1. 特定の場所や住所をもとに地図を表示させる
  2. 端末のGPS情報をもとに地図を表示させる
  3. スライダーを使って地図を拡大・縮小する
  4. クリックすると、ウェブページやアプリに移動するようにする

今回はそのシリーズ第1回目として、特定の場所や住所をもとに、地図を表示させてみます。

前準備

Bing Maps API キーをこちらのリンクからまたはGoogle Static Maps API キーをこちらのリンクから取得します。取得したAPIキーは後程利用するので、メモしてください。

PowerApps スタジオかウェブ版から、アプリの「新しいアプリ」を選択します。レイアウトは携帯用でもタブレット用でもどちらでも大丈夫です。

設定画面を作成する

まず、設定画面を作成し、ほかの画面で設定内容を利用できるようにします。画面左側にあるスクリーンの一覧から、Screen1の名前を変更し、「ConfigurationScreen」にします。

「挿入」タブから「テキスト」を選択し、「テキスト入力」をクリックして追加します。

名前「TextInput1」 を「txtBingMapsKey」に変更します（Google Maps APIを利用する場合は、「txtGoogleMapsKey」にします）

ヒントのテキストは「こちらにAPIキーを入力してください」にし、「既定」は実際に先ほど取得したAPIキーを設定しておきます。

次に、新たなテキスト入力を「挿入」タブから「テキスト」を選択し、「テキスト入力」をクリックして追加します。今度は

名前を「txtImageWidth」に変更し、ヒントのテキストは「地図の幅を入力します」にします。「既定」の設定は携帯用のアプリの場合は「600」、タブレットであれば「1200」にします。書式を数値にするために、「書式」は「数値」に変更します。

作成したtxtImageWidthをコピー(CTRL + C)し、同じ画面へ貼り付けて(CTRL + V)複製します。名前を「txtImageHeight」に変更し、ヒントテキストは「地図の高さを入力します」にします。「既定」の設定は携帯用のアプリの場合は「300」、タブレットであれば「600」にします。書式を数値にするために、「書式」は「数値」に変更します。

メイン画面を追加する

挿入> 新しい画面 > 空を選択します。

名前を「MainScreen」へ変更します。

作成したMainScreenを右クリックし、「上へ移動」を選択して表示順序を一つ上にします。

挿入 > メディア > 画像を選択し、地図を表示させる機能を画面に追加します。

Image1の名前をimgMapControlにします。

幅の設定Widthは txtImageWidth と入力し高さの設定Heightは txtImageHeight にします。

特定の住所や位置に対して地図を表示させる

まず、住所や場所を入力するためのテキスト入力項目を追加しましょう。 挿入タブ > テキスト > テキスト入力 を選択します。テキスト入力の名前をtxtLocationにします。項目を画面の任意の場所へ移動します。

ヒントテキストは「住所や場所名を入力」などにします。既定の設定は空欄もしくは「浅草」などの好きな場所を設定してもいいです。（地名でないと上手くいかないようです）

マップを表示させるためには、Image プロパティのimgMapControl を利用します：

Bing Mapsの場合：

“https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/” & EncodeUrl(txtLocation.Text) & “?mapSize=” & txtImageWidth & “,” & txtImageHeight & “&key=”&txtBingMapsKey.Text
Bing Maps: サンプルや、そのほかのパラメータに関しては Get a Static Map をご覧ください（英語）

Google Mapsの場合：

“https://maps.googleapis.com/maps/api/staticmap?center=” & EncodeUrl(txtLocation.Text) & “&size=” & txtImageWidth & “x” & txtImageHeight & “&key=”&txtGoogleMapsKey.Text

Google Maps: サンプルや、そのほかのパラメータに関しては Google Static Maps Developer Guide（英語）をご覧ください。

以下はBing Mapsを使ってPowerAppsで「恵比寿」を表示させた場合の例です：

いろいろな設定で遊んでみる：

表示方法や (Bing Maps) 、マップの種類を変えてみましょう (Google Maps):

Bing Maps ではイメージセット（表示方法）が変更できます。ここではドロップダウンを用意して、表示を変更できるようにしてみましょう。

挿入 > コントロール > ドロップダウン でドロップダウン機能を追加します。コントロールの名前をdrpBingImageSets. にします。Items のプロパティは以下の内容にします：

[“Road”,”Aerial”, “AerialWithLabels”, “AerialWithLabelsOnDemand”, “CanvasDark”, “CanvasLight”, “CanvasGray”]
次に、先ほど作成したimgMapControlのImage設定を以下に変更し、ドロップダウンの設定が反映されるようにします：

“https://dev.virtualearth.net/REST/V1/Imagery/Map/” & drpBingImagerySets.Selected.Value & “/” & EncodeUrl(txtLocation.Text) & “?mapSize=” & txtImageWidth & “,” & txtImageHeight & “&key=”&txtBingMapsKey.Text

Google Maps では、4種類のマップタイプに対応しています。ドロップダウンを追加して、設定が変更できるようにしてみましょう。

挿入 > コントロール > ドロップダウン でドロップダウン機能を追加します。コントロールの名前をdrpGoogleMaptypesにします。Items のプロパティは以下の内容にします：

[“roadmap”,”terrain”, “satellite”, “hybrid”]
次に、先ほど作成したimgMapControlのImage設定を以下に変更し、ドロップダウンの設定が反映されるようにします：

“https://maps.googleapis.com/maps/api/staticmap?center=” & EncodeUrl(txtLocation.Text) & “&&size=” & txtImageWidth & “x” & txtImageHeight & “&maptype=” & drpGoogleMaptypes.Selected.Value & “&key=”&txtGoogleMapsKey.Text

このようにMap APIは非常に強力な機能です。他にも色々試されたいかと思いますので、次回もお楽しみに！

情報元: https://powerapps.microsoft.com/en-us/blog/image-control-static-maps-api/