Bing Maps上の好きな場所をマークして情報を表示するプログラムを作る

今回は、地図上にある任意の場所をマークして情報を表示するプログラミングサンプルを紹介します。

サンプルでは、筆者の地元である四国八十八か所の霊場をBing Maps上に表示します。札所の番号が付いた円が表示されているので、タップすると札所名と所在地が表示されます。[検索]ボタンも表示され、ボタンをクリックするとBing起動して、該当する札所情報をInternet Explorer10に表示します。

図1：四国八十八か所の霊場の位置に札所の番号が表示された円が表示されている（左）／図2：任意の札所をタップすると札所名と所在地、[検索]ボタンが表示される（右）（クリックで拡大）

図3：[検索]ボタンをタップすると該当する札所に関する情報がInternet Explorer10に表示される（左）／図4：該当するデータをタップすると情報が表示される（右）（クリックで拡大）

四国八十八か所の地図に戻るには、画面の左隅上にマウスポインターを移動してマウスポインターを下方向にずらすことで、最近使用したアプリの一覧が表示されます。その中から、現在実行しているアプリを選択します。この箇所の画像はキャプチャできませんので、実際に自分で試してみてください。次に紹介する動画の中で説明しています。

実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホで撮った動画です。見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」には任意のプロジェクト名を指定します。ここでは「Win8_Michitomo」という名前を付けています。

ソリューションエクスプローラー内のプロジェクト内に、マウスの右クリックで表示されるメニューの「追加(D)／新しい項目(W)」から、リスト1のXML文書ファイル(Michitomo.xml)を追加します。

ダウンロードされたサンプルファイルにはXML文書ファイルは追加済みです。

リスト1　XML文書ファイル(Michitomo.xml)

<?xml version="1.0"?>
<遍路>
  <札所番号="1" 所在県="徳島県" 所在地="徳島県大麻町板東126" 緯度="34.1593899" 経度="134.5030885" ルビ="りょうぜんじ">霊山寺</札所>
  <札所番号="2" 所在県="徳島県" 所在地="徳島県鳴門市大麻町字檜ダンの上12" 緯度="34.15565101" 経度="134.49034826" ルビ="ごくらくじ">極楽寺</札所>
  <札所番号="3" 所在県="徳島県" 所在地="徳島県板野郡板野町大寺66" 緯度="34.14743168" 経度="134.46853091" ルビ="こんせんじ">金泉寺</札所>
  <札所番号="4" 所在県="徳島県" 所在地="徳島県板野郡板野町黒谷5" 緯度="34.1513026632698" 経度="134.43085658" ルビ="だいにちじ">大日寺</札所>
  <札所番号="5" 所在県="徳島県" 所在地="徳島県板野郡板野町羅漢字林東5" 緯度="34.13716523" 経度="134.43195684" ルビ="じぞうじ">地蔵寺</札所>
  ～<札所></札所>繰り返し～
</遍路>

「拡張機能と更新プログラム」から「Bing Maps SDK for Windows store apps」のインストール

Bing MapsをWindows ストアから使用するには、あらかじめ「Bing Maps SDK for Windows store apps」をインストールしておく必要があります。

まず、VS2012のメニューの「ツール(T)／拡張機能と更新プログラム(U)」と選択します。表示される画面の左から、「オンライン」を選択します。すると「Bing Maps SDK for Windows store apps」の「ダウンロード」が出てきますので「ダウンロード」をクリックします。

「ダウンロード」をクリックすると「ダウンロード」が開始されます。「ダウンロード」が完了すると「インストール」が出てきますので、これをクリックしてインストールします。インストールが完了すると、「Bing Maps SDK for Windows store apps」の右隅上にインストール済みのアイコンが付きます

[今すぐ再起動]をクリックしてVS2012を再起動してください。

画像付きの詳細な解説については、前回の「Bing Maps上に地震の震源地を表示する」を参照してください。