WindowsストアアプリでWeb APIを使用してみよう

作って学ぶ！ 新人研修／Windowsストアアプリで電子カタログを作ろう（6）

Bing Maps Keyを取得する

　Bing Mapsの地図を使うには、Bing Mapsにあらかじめ登録してKeyを取得する必要があります。

　まず、以下のサイトにアクセスしてサインインします。

• http://www.bingmapsportal.com/

Bing Mapsへのサインイン

　初めて使うときは、［New User］をクリックしてアカウントの登録が必要になります。

　アカウントの登録画面に必要な情報を入力してアカウントを作成します。なお［Account name］と［Email Address］は必須入力項目です。

Bing Mapsへのサインイン

　次にKeyを作成します。［Create or view keys］をクリックすると、Keyの作成画面が表示されます。

　［Application name］は任意のアプリケーション名を指定します。［Key type］はTrialとBasicが選択できます。Trialの場合は、90日間使用できます。この期間を超えて使用する予定があるときは、Bing Mapsの利用規約を参照してください。［Application type］は、Windows Store appを選択します。

Keyの作成

　必要な情報を入力し、［Submit］ボタンをクリックすると、次のような画面に赤い字でBing Maps Keyが表示されます。

　このKeyをアプリケーションで使用しますので、忘れないように控えてください。

Keyの確認

緯度経度を追加する

　地図を表示するには、緯度と経度の情報が必要になります。旅行カタログサンプルでは、第3回の連載時に作成した、旅行先を選択するリストボックスにヨーロッパとビーチリゾートの選択肢を作成しましたが、これらのvalue属性に緯度経度データを追加します。緯度と経度はカンマ区切りで登録します。

旅行先の緯度経度

リストボックスの値	緯度	経度
ヨーロッパ	43	11
ビーチリゾート	-8.5	115

旅行先のリストボックスに緯度経度を追加（default.htmlの抜粋）

Step1:旅行先を選んでください：
<select id="area" >
    <option value="43,11">ヨーロッパ</option>
    <option value="-8.5,115">ビーチリゾート</option>
</select>

地図を表示する場所を決める

　次に、地図を表示したい場所にid属性が「map」のdiv要素を配置します。default.htmlを開き、main-right要素の中を次のように修正します。

地図の表示エリア（default.htmlの抜粋）

<div id="main-right">
  Step1:旅行先を選んでください：
  ～中略～
  <!--地図の表示 -->
  <div id="map"></div>
</div>

　このdiv要素に、スタイルを設定するためdefault.cssに以下を追加します。

地図のスタイル定義（default.cssの抜粋）

div#map {
    margin:20px;
    height:250px;
    position: relative;
}