はじめに
今回は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 地図検索
ページの作成
まずは，これまでと同じように地図を表示するところまでコードを書いておきましょう。検索用のテキストエリアとボタンも用意しています。
<!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&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関数で受け取ります。
