地図を表示しよう
今回のサンプルアプリでは、画面の右下側に地図を配置します。
まず、前回の連載で作成したサンプルアプリケーションに機能を追加していくので、前回の作成したプロジェクトを開きます。Visual Studioを起動し、［ファイル］－［プロジェクトを開く］を選択します。ファイルの選択ダイアログが表示されるので、前回保存したフォルダの中にある「TravelSample.sln」を選択して、［開く］ボタンをクリックします。
Bing Maps SDKをインストール
旅行カタログに地図を表示するため、マイクロソフト社が提供している地図検索サービス「Bing Maps」を利用します。まず、この機能を使うために「Bing Maps SDK」をインストールします。
Visual Studioの［ファイル］－［ツール］－［拡張機能と更新プログラム］を選択します。
［拡張機能と更新プログラム］ダイアログの［オンライン］－［Bing Maps SDK for Windows Store apps］を選択し、ダウンロードボタンをクリックします。
ダウンロードが完了すると、ダイアログが表示されますので［インストール］ボタンをクリックします。
インストールが終了したら、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要素の中を次のように修正します。
<head>
～中略～
<!-- WinJS 参照 -->
～中略～
<!-- TravelSample 参照 -->
～中略～
<!-- 連載第6回 BingMapのデータ参照 -->
<script src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
</head>
