地図とオンラインOSの関係（前編）：Windows Liveが魅せる次世代マッシュアップ（3/5 ページ）

[大澤文孝，ITmedia]

　この地図は、http://maps.live.com/で提供されているものと、まったく同じだ。

　このため、マウスでドラッグしてスクロールしたり、表示されているナビゲーションコントロールを使って移動や拡大／縮小をするなど、航空写真や3D表示に切り替えるといった操作も可能だ。

画面1■リスト1の実行結果

JavaScriptから地図の中央位置を設定する

　画面1を見ると分かるように、表示される地図の標準位置は米国であり、日本人が使うには適した初期表示とは言えないだろう。そこでまずは、地図の位置を設定してみよう。

　地図の中央位置は、SetCenterメソッドで指定できる。またSetCenterAndZoomメソッドを使うと、中央位置と拡大率を合わせて設定することもできるのだ。

　Virtual Earthでは、位置情報をVELatLongオブジェクトとして表現している。VELatLongオブジェクトは、「緯度」「経度」で場所を示すものだ。

　例えば、緯度35.6811度、経度139.76709度を示す場合には、次のように表現すればよい。

var lat = new VELatLong(35.6811, 139.76709);

　ここで例示した「緯度35.6811度、経度139.76709度」は、「東京駅」だ。

　この緯度／経度の値は、http://maps.live.com/で「東京駅」を検索することによって調べた。また、検索したときに［共有］メニューから［固定リンクの表示］をクリックすると、現在中央に表示されている位置情報を示すURLが表示される（画面2）。

画面2■東京駅を検索したところ

　「東京駅」を検索したときは、次のようなURLで示された。

http://maps.live.com/default.aspx?v=2&cp=35.681126~139.767058&style=r&lvl=16&tilt=-90&dir=0&alt=-1000&sp=Point.pyd4y6wndhy2_%u6771%u4eac%u99c5%uff08%uff2a%uff32%u3001%u6771%u4eac%u5730%u4e0b%u9244%uff09___

　この「cp=35.681126~139.767058」の部分が、該当の緯度／経度となる。さて、VELatLongオブジェクトを作成したら、SetCenterAndZoomメソッドを呼び出して中央位置を指定する。拡大率は1〜19までを指定できる。該当するのは、次の個所だ。

map.SetCenterAndZoom(lat, 15);

　以上をまとめ、リスト1に示した初期化コードをリスト2のように変更すると、次の画面3に示すように、東京駅周辺の地図が表示されるのだ。