前回、試行錯誤しながらエンティティリストのカレンダービューを表示したところまでいきました。
今回はもう一つの表示機能、マップビューでも表示できるか検証したいと思います。
準備作業
今回は取引先会社にプロ野球12球団の本拠地を登録してそれを地図に登録させたいと思います。
まずは何事にも準備作業から。
今回の材料はこちら。
- 地図表示をするエンティティ、今回は取引先会社を使用
- エンティティリストに取り込むための取引先会社のビュー、緯度や経度を項目に入れる必要はないみたい
- エンティティリスト
- Webページ
- Bing MapsのAPIキー
- 取引先会社のレコード
あと、エンティティアクセス許可で取引先会社に参照権限を付与しておきましょう。
今回は他の球場も表示させたいので「グローバル」にしています。
この中でちょっと面倒臭いのがBing MapsのAPIキー。
Bing MapsのDev CenterからMicrosoftアカウントを作成してログインします。
ログイン後、[My Account]の[My Keys]に移動。
Create Keyに必要事項を記入し生成します。
Application nameは任意名でOK（何に使用しているキーかが区別できればよいレベル）で、Key typeとApplication typeはそのままデフォルトでOK。
作成後にキーが生成されます。
最後に取引先会社のレコード。
本拠地の住所と緯度経度を登録しています。
エンティティリストの設定
材料が揃ったところで次は下ごしらえです。
エンティティリストはこのように設定します。
ビューを取り込むところは従来の一覧表示と変わらず。
あとは、[マップビュー]タブで有効化と緯度経度などのマッピングをします。
今回はBingマップを使用して地図表示するため、[設定]セクションにも情報を記入します。
資格情報に先ほど作成したBing MapsのAPIキーを入れます。
REST URLはそのままでOK。
Webページの設定
Webページも一覧表示と同じ要領で、エンティティリストを取り込みます。
ここでは詳しくは書きませんが、こちらもページテンプレートがフルページだと地図が表示されないため、書き換えのページテンプレートを作成したものを指定します。
作り方は前回作り方を載っけていますのでそちらを参照。
設定はこのようになります。
いざ表示！
あとは設定したマップビューがうまく表示できるかドキドキです。
リンク等も貼って、Webページへ入ってみました。
真っ青！
半分青いどころか全部青い！
でも地図は表示されている模様。
地図をいじってみると、デフォルト位置が海のど真ん中になっているようでした。
ちゃんと縮小すれば世界地図が出てきます。
ちなみに地図の右側にはレコード（ここでは球場）の一覧が出てくるんですが、それも表示されていません。
どうやら、デフォルト位置から周辺に球場があれば表示され、なければ何も表示されないようです。
地図を縮小しても表示がされる訳ではないので、初期位置の調整が必要なのが分かりました。
なので、初期位置を設定。
エンティティリストの[マップビュー]タブ[設定]セクションの「既定のセンターの緯度」「既定のセンターの経度」に値を入れました。
初期位置が皇居となるように入力。
これで再度表示させてみると、
いい感じです！
地図範囲内に東京ドームと神宮があるので、2つがリストに表示されます。
地図を縮小しても、横浜スタジアムやZOZOマリンスタジアムは表示されません。
初期位置が大事なんですね。
でも、上部のテキストボックスで球場名などを入れて検索すれば出てくれます。
全体を表示したい場合は、初期位置とズームをうまく調整しましょう。
表示された地図は様々な機能があります。
例えば、表示形式の切り替え。
航空写真や概観図の表示が可能です。
こちらが航空写真
こちらが概観図。
地図ってみてるだけで楽しいよね♪
あとはルート検索機能みたいなものも備わっています。
例えば、福岡空港から福岡 ヤフオク!ドームへ行きたい場合、上部テキストに「福岡空港」を入力。
右側に表示されている球場の「Get Directions」ボタンを押します。
方向の取得で開始場所と終了場所を指定します（デフォルトで入力済み）。
一方は選択した球場の緯度経度になっています。
場所の入力もOKです。
すると、福岡空港からヤフオクドームまでの経路が表示されます。
標準機能でここまでできるのすごいかも！
コメント