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

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

地図を表示しよう

　今回のサンプルアプリでは、画面の右下側に地図を配置します。

　まず、前回の連載で作成したサンプルアプリケーションに機能を追加していくので、前回の作成したプロジェクトを開きます。Visual Studioを起動し、［ファイル］－［プロジェクトを開く］を選択します。ファイルの選択ダイアログが表示されるので、前回保存したフォルダの中にある「TravelSample.sln」を選択して、［開く］ボタンをクリックします。

Bing Maps SDKをインストール

　旅行カタログに地図を表示するため、マイクロソフト社が提供している地図検索サービス「Bing Maps」を利用します。まず、この機能を使うために「Bing Maps SDK」をインストールします。

　Visual Studioの［ファイル］－［ツール］－［拡張機能と更新プログラム］を選択します。

Bing Maps SDKの追加

　［拡張機能と更新プログラム］ダイアログの［オンライン］－［Bing Maps SDK for Windows Store apps］を選択し、ダウンロードボタンをクリックします。

Bing Maps SDKのインストール

　ダウンロードが完了すると、ダイアログが表示されますので［インストール］ボタンをクリックします。

　インストールが終了したら、Bing Maps SDKを有効にするためにVisual Studioを再起動してください。

　次に、ソリューションエクスプローラで旅行カタログを選択し、［参照］を選びます。右クリックして［参照の追加］を選択します。

参照の追加

　［参照マネージャー］ダイアログが表示されますので、［Bing Maps for JavaScript］をチェックします。この際、すでにチェックがされている［Windows library for JavaScript 1.0］のチェックを外さないように気を付けてください。［OK］ボタンをクリックしてダイアログを終了します。

参照の設定

　ソリューションエクスプローラで、Bing Maps for JavaScriptの参照が追加されていることを確認してください。

参照の確認

　次に、Bing Mapsから取得したデータを、旅行カタログで使用するために、default.htmlを開き、head要素の中を次のように修正します。

旅行のデータ参照定義（default.htmlの抜粋）

<head>
～中略～
    <!-- WinJS 参照 -->
    ～中略～
    <!-- TravelSample 参照 -->
    ～中略～
    <!--   連載第6回  BingMapのデータ参照    -->
    <script src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
</head>