特集
» 2007年02月15日 08時00分 公開

Windows Liveが魅せる次世代マッシュアップ:地図とオンラインOSの関係(前編) (2/5)

[大澤文孝,ITmedia]

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

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

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

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

リスト1■Virtual Earth Map Control利用の基本例(UTF-8)

<html>
<head>
  <title>地図のテスト</title>
  <!-- Virtual Earth Controlのソースの読み込み -->
  <script language="JavaScript"
     src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js">
  </script>
  <script language="JavaScript">
    <!-- 初期化コード -->
    var map = null;
    function InitMap()
    {
      <!-- 引数には、表示先のdiv要素のid値を渡す -->
      map = new VEMap('mapArea');
      map.LoadMap();
    }
  </script>
</head>
<body onload="InitMap();">
<h1>地図表示の例</h1>
<div id="mapArea"
  style="width:320px; height:320px;"/>
</body>
</html>

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


<script language="JavaScript"
   src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js">
</script>

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

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


<div id="mapArea"
  style="width:320px; height:320px;"/>

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


map = new VEMap('mapArea');
map.LoadMap();

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

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ

マーケット解説

- PR -