PR

Bing Mapsで地図を表示させよう

2014年6月3日(火)
薬師寺 国安

Bing Maps Keyの取得方法

Bing Mapsを使用するには下記URLのBing Maps Account Centerにアクセスして専用のライセンスキーを取得する必要があります。

http://www.bingmapsportal.com/

Microsoft アカウント(旧Windows Live ID)を持っている方はSign Inします。持っていない方はNew UserからMicrosoft アカウントを作成してSign Inしてください(図6)。

図6 Bing Maps Account Center でSign Inする
図6 Bing Maps Account Center でSign Inする

Sign In後に、左にある「Create or view keys」をクリックします(図7)。

図7 「Create or view keys」をクリックする
図7 「Create or view keys」をクリックする

Create keyの画面が表示されるので、必要な項目を入力してSubmitします。筆者はすでにキーを持っているので、下記にキーが表示されています(図8)。

図8 Bing Mapsキーが表示されている
図8 Bing Mapsキーが表示されている

筆者は2つのBing Mapsキーを取得していますが、Windows ストアに使用するのは、Windows Store Appsのほうを使用しています。Key typeはBasicとなっています。

ちなみに、Basic / Public websiteの場合は、「24時間で、50,000アクセスを越えない場合に無償で利用できる」ようです。

次に、ソリューションエクスプローラー内にImageというフォルダーを作成して、地図上に立てるプッシュピンの代わりとなる画像を取り込んで配置します。記事末からダウンロードできるサンプルファイルに、この画像が含まれています。

さて、これでBing Mapsを使用する手はずが整いました。ではMainPage.xamlをダブルクリックしてデザイン画面を表示しましょう。

コントロールの配置

今回使用する主なコントロールは表1を見てください。

表1 今回使用する主なコントロール

コントロール 名前 役割
Map myMap Bing Maps地図を表示
TextBox addressTextBox 住所を入力する入力ボックス
AppBarButton okButton 入力した住所の緯度・経度を取得してその位置にプッシュピンを立てる

AppBarButtonはプロパティの[アイコン]ペインを展開して「Symbol」から「Accept」を選択します。[共通]ペインのLabelには「OK」と指定しておきます。

「Bing Maps SDK for Windows 8.1 Store apps」をインストールすると、「ツールボックス」に「Bing Maps」のタブが追加され、その中にMapコントロールも登録されています。このMapコントロールをデザイン画面上にドラッグすると、最初はデザイン画面の再起動のメッセージが表示されますが、再度Mapコントロールをドラッグすると地図が表示されるようになります。適当なサイズに拡大してください。

各コントロールにつけた名前は表1を参照してください。表1の各コントロールをレイアウトすると図9のようになります。

図9 各コントロールをレイアウトした
図9 各コントロールをレイアウトした

書き出されるXAMLをリスト1のように編集します。

(1)ツールボックスからMapコントロールをデザイン画面上に追加すると、自動的にMapsという名前空間が追加される。(2)Maps:Map要素のCredentialsプロパティにBing Maps Centerより取得したキーを指定する。

リスト1 編集されたXAMLコード(MainPage.xaml)

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Bing_Maps_Sample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Maps="using:Bing.Maps"■(1)
    x:Class="Bing_Maps_Sample.MainPage"
    mc:Ignorable="d">
    <Viewbox>
        <Grid Background="Black" Height="767">
            <StackPanel x:Name="StackPanel1" HorizontalAlignment="Left" Height="100"  VerticalAlignment="Top" Width="1356" Background="Navy" Orientation="Horizontal">
                <TextBlock HorizontalAlignment="Left" Height="68" Margin="20,15,0,0" TextWrapping="Wrap" Text="Bing Maps" VerticalAlignment="Top" Width="306" FontSize="48" FontWeight="Bold"/>
                <TextBox x:Name="addressTextBox" Height="56" Margin="0,21,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="640" FontFamily="Meiryo UI" FontSize="36" FontWeight="Bold"/>
                <AppBarButton x:Name="okButton" Height="101" Label="OK" VerticalAlignment="Top" Width="96" Icon="Accept" Margin="0,15,0,-16"/>
            </StackPanel>
            <Maps:Map x:Name="myMap" HorizontalAlignment="Left" Height="667" Margin="-13,100,-13,0" VerticalAlignment="Top" Width="1382" Credentials="Bing Maps Centerで取得したキー"/>■(2)
        </Grid>
    </Viewbox>
</Page>

準備が整ったので、続いてプログラムコードを見ていきましょう。

プログラムコード(MaiPage.xaml.vb)

まず、名前空間を読み込んでおきます(リスト2)

リスト2 名前空間の読み込み

最新のHTTPアプリケーション用のプログラミング インターフェイスを提供するクラスの含まれる、System.Net.Http名前空間をインポートする。
Imports System.Net.Http

アプリケーションウィンドウやウインドウ対話を作成し管理するサポートと、ウインドウ上の入力イベントを処理するクラスの含まれる、Windows.UI.Core名前空間をインポートする。
Imports Windows.UI.Core

Bing Mapsに関するクラスの含まれる、Bing.Maps名前空間をインポートする。
Imports Bing.Maps

UIに関するクラスの含まれるWindows.UI名前空間をインポートします。住所を表示させる場合のTextBlockの文字色等を設定する場合等に必要だ。
Imports Windows.UI

コンテキストメニューおよびメッセージダイアログのサポートを提供するクラスの含まれる、Windows.UI.Popups名前空間をインポートする。
Imports Windows.UI.Popups

次にメンバー変数を定義します(リスト3)

リスト3 メンバー変数の定義

Public NotInheritable Class MainPage
    Inherits Page
入力した住所から緯度・経度を取得して、文字列型メンバー変数、myAddressLatitudeとmyAddressLongitudeに格納する変数を宣言する。
    Private myAddressLatitude As String
    Private myAddressLongitude As String

Windowsランタイムコアイベントメッセージディスパッチャーを提供するクラスである、CoreDispatcherクラスのメンバー変数、myCoreDispacherを宣言する。
    Private myCoreDispacher As CoreDispatcher
Think IT会員限定特典
  • Bing Mapsで地図を表示させるプログラム

    『Windows ストア アプリ 100行プログラミング』 第6回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています