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

公開された地図検索サービスAPIを利用し、派生となるコンテンツサービスを構築するサイトが増えている。MSのVirtual Earthは、Windows Live IDと連携するなどWindows Vistaとも親和性が高い。

[大澤文孝，ITmedia]

Virtual Earth Map Controlで地図を表示する

　まず最初に、利用が簡単なAPIとして「Virtual Earth Map Control」を紹介しよう。

　Virtual Earth Map Controlは、地図を表示するためのコントロールだ。JavaScriptとして提供されているものだ。このコントロールのもっとも基本的なソース例をリスト1に示した。

　ここで注意したいのは、HTMLを「UTF-8」の文字コードで保存するという点だ。最初にチェックしなければ意外と見落としがちなため、注意してほしい。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　Virtual Earth Map Controlを使うには、そのライブラリとなるソースコードを、次のようにして読み込む。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　地図を表示する領域はdiv要素としてあらかじめ確保しておく。

　地図を表示する大きさ（解像度）は、CSSで定義する。下記の例では、幅、高さともに320ドットとした。ここでは、例としてid属性にmapAreaという名前にしたが、実際には何でもよい。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　その後、VEMapオブジェクトを作り、LoadMapメソッドを呼び出す。VEMapのコンストラクタに渡す引数は、表示先となるdiv要素のid属性だ。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　すると、次に挙げる画面1のような地図が表示される。