Virtual Earth
Virtual Earthはオンラインの地図サービスを提供するプラットフォームです。これによりユーザへ住所や店名による検索，航空写真の表示などの提供が可能になります。Bird’s eye（概観図）と呼ばれる低角度で撮影された航空写真の表示が特長のひとつとなっています（日本で対応した場所は今のところありませんが）。身近なところではLive Search Mapsに使用されており，Virtual Earthを体験することができます。
開発者向けにはVirtual Earth Map Control SDKというAPI群が提供されており，簡単にVirtual Earthを利用したWebベースのアプリケーションの作成が可能です（※1）。今回はこのSDK・APIを利用した基本的なVirtual Earthの操作方法を紹介します。
開発環境
Virtual Earth Map ControlはJavaScriptのライブラリとして提供されています。そのためメモ帳さえあればコードの記述は可能です。ですが，Visual Studio 2008からJavaScript（正確にはJScript）のインテリセンス機能（※2）が使用できるようになっています。入力が補完され便利ですので使用してみるとよいでしょう。Visual Web Developer 2008 Express Editionでも使えます。
JScriptのインテリセンス機能はJscriptのコードをある程度理解してくれますが，Virtual Earth Map Controlのライブラリについては機能が働きません。そこでインテリセンスを機能させるためのVirtual Earth用のライブラリが公開されていますので，併せて使用しましょう。
Virtual Earth JavaScript Intellisense HelperのReleasesページよりダウンロードできます。ダウンロードしたファイル内のVEJSフォルダ以下のファイルが使用するjsファイル群になります。インテリセンス機能のみに使用するファイルですので，インテリセンスを有効にしたいjsファイル内から参照ディレクティブを使ってVeJavaScriptIntellisenseHelper.jsを相対パスで指定します。参照ディレクティブは次のように記述します。
/// <reference path="VEJS/VeJavaScriptIntellisenseHelper.js" />
ダウンロードしたファイルにあるDefault.aspx.jsを使用して確認するとよいでしょう（図1）。
図1 Virtual Earth JavaScript Intellisense Helperによるインテリセンス
マップの表示
まずは基本となるマップの表示からです。HTMLファイルを作成し，先頭に以下のDOCTYPE宣言を記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
次にheadタグ内に使用する文字セットを指定します。Virtual EarthではUTF-8を使用する必要があります。また，Virtual Earth Map Controlを外部jsファイルとして参照します。Virtual Earthを操作するJavaScriptのコードを外部ファイルとして記述する場合はjsファイルを新しく作成し同様にこの場所に追加しておきます。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6&mkt=ja-jp"></script>
マップを表示するためのdivタグをbodyタグ内に追加します。正しく表示するためにはstyle属性のpositionを“absolute”または“relative”に設定しておく必要があります。また，width・heightの値がマップの大きさになります。
<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>
マップを表示するにはVEMapクラスのインスタンスを生成しLoadMapメソッドを呼びます。以下のように関数を作り，bodyタグのonloadイベントから呼ぶようにします。VEMapクラスのコンストラクタにはマップを表示するdivタグに指定したid属性の値を渡します。
var map = null;
function pageLoaded() {
map = new VEMap("myMap");
map.LoadMap();
}
<body onload="pageLoaded();">
作成したHTMLファイルを開いてみましょう。図2のようにマップが表示されると思います。
図2 マップの表示
- ※1
- 執筆時点のMap Control SDKのバージョンは6.0です。また利用規約を確認してください。
- ※2
- 詳しくはJScript IntelliSenseの概要を参照してください。
