CodeZine(コードジン)

特集ページ一覧

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

作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう(6)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/01/06 14:00

目次

Bing Maps Keyを取得する

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

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

Bing Mapsへのサインイン
Bing Mapsへのサインイン

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

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

Bing Mapsへのサインイン
Bing Mapsへのサインイン

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

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

Keyの作成
Keyの作成

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

 この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;
}

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:作って学ぶ! 新人研修/Windowsストアアプリで電子カタログを作ろう

著者プロフィール

  • WINGSプロジェクト 阿佐 志保(アサ シホ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5