使ってみよう! Bing API/SDK

第17回 使ってみよう! Bing Maps AJAX Control──地図をWebページに貼り付け(5)

この記事を読むのに必要な時間:およそ 7.5 分

はじめに

今回はBing Maps AJAX Controlの5回目です。1回目にあたる第13回のときに少しふれたように,Bing Maps AJAX Control 7.0から大幅にライブラリーの内容が変更され,機能が地図の表示に限定したコントロールライブラリーとなっています。住所から経緯度を得るジオコーディングなどを行いたい場合は,Bing Maps REST ServicesなどのWebサービスと組み合わせて使用します。今回は,Bing Maps AJAX ControlとBing Maps REST Servicesを連携したWebアプリケーションを作成してみましょう。

作成するWebアプリケーションは,Bing Mapsを単純にしたような,地図アプリケーションの基本,地図検索です。ユーザーが入力した地名の場所を検索し,検索結果の候補にプッシュピンを表示します図1)⁠

図1 地図検索

図1 地図検索

ページの作成

まずは,これまでと同じように地図を表示するところまでコードを書いておきましょう。検索用のテキストエリアとボタンも用意しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sample</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;mkt=ja-jp"></script>
    <script type="text/javascript">
        <!--
        var map = null;

        function GetMap() {
            var options = {
                credentials: "BingMapsKey"
            };
            map = new Microsoft.Maps.Map(document.getElementById("map"), options);
        }
        //-->
    </script>
</head>
<body onload="GetMap();">
    <div id="map" style="position: relative; width: 512px; height: 512px"></div>
    <div>
        <input id="query" type="text" value="東京" />
        <input type="button" value="検索" onclick="search();" />
    </div>
</body>
</html>

BingMapsKeyの部分は,Bing Maps Keyに置き換えてください。

また今回は,JavaScriptのライブラリー,jQueryを使用します。上記コードではライブラリーの参照もしています。

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js" type="text/javascript"></script>

以上のコードを元に地図検索用のコードを追記していきます。

Webサービスのリクエスト処理

Bing Maps REST Services

地名から経緯度を取得するには,Bing Maps REST ServicesのLocation APIを利用します。Bing Maps REST Servicesについては,第9回から第11回に渡って紹介しています。Location APIの詳細は第9回を参照してください。

Location APIは,ジオコーディング・逆ジオコーディングを提供するAPIです。地図検索のように住所や建物名などのクエリーからも地理情報を取得できます。今回のアプリケーションではクエリーから経緯度などの情報を得て利用します。

クエリーから情報を取得する場合,次のような形式のURLにアクセスします。

  • http://dev.virtualearth.net/REST/v1/Locations?
      query=東京タワー&
      key=BingMapsKey&
      c=ja-jp&o=xml

連載ではXML形式で取得していましたが,JavaScriptで扱いやすいJSON形式を利用します。またJSONPと呼ばれる一般的な仕組みを利用してAPIにアクセスし,レスポンス受信時に指定したJavaScriptの関数を呼び出して使います。これらの設定もLocation APIのURLのパラメーターに指定します。

  • http://dev.virtualearth.net/REST/v1/Locations?
      query=東京タワー&
      key=BingMapsKey&
      jsonp=callback&
      o=json
      c=ja-jp

セッションIDの取得

Bing Maps AJAX ControlおよびREST Servicesのどちらを利用するにもBing Maps Keyが必要です。それぞれにBing Maps Keyを設定してもよいですが,Bing Maps AJAX ControlのMapオブジェクトからBing Maps Keyとして使用できるセッションIDが取得できます。

Bing Mapsのライセンスの種別によって,一定期間に利用できるセッション数に制限があります。Bing Maps AJAX Controlのロードから,ユーザーがほかのWebページへ移動またはWebブラウザーを閉じるまでが1セッションとしてカウントされます。Bing Maps AJAX ControlからREST Servicesを利用する場合,セッションIDを利用するとセッションの消費を抑えられます。

セッションIDの取得には次のようにMapオブジェクトのgetCredentialsメソッドを使います。引数には,セッションIDを受け取る関数を指定します。

// map は Map オブジェクト
map.getCredentials(function (credentials) {
    if (credentials !== null) {
        // credentials を Bing Maps Key に指定し REST Services を呼び出せます
    }
});

Location APIの呼び出し

さて以上を踏まえて,コードからLocation APIを利用してみましょう。先ほど示したコードに追記していきます。まず検索ボタンをクリックしたら呼ばれるsearch関数です。

function search() {
    map.entities.clear(); // 地図上のオブジェクトを削除
    map.getCredentials(createGeocodeRequest);
}

次にセッションIDを受け取り,ジオコーディングを行う部分です。Location APIの呼出しは,jQueryを使って記述すると次のようになります。

function createGeocodeRequest(credentials) {
    if (credentials === null) {
        alert("Credentials is null.");
        return;
    }

    $.ajax({
        type: "GET",
        url: "http://dev.virtualearth.net/REST/v1/Locations",
        dataType: "jsonp",
        data: {
            key: credentials,
            query: $("#query").val(),
            c: "ja-JP",
            o: "json"
        },
        jsonp: "jsonp",
        success: function (data, dataType) {
            geocodeCallback(data);
        }
    });
}

非同期通信のためレスポンスは,geocodeCallback関数で受け取ります。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp

コメント

コメントの記入