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

» 2007年02月15日 08時00分 公開
[大澤文孝，ITmedia]
前のページへ 1|2|3|4|5 次のページへ

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のような地図が表示される。

前のページへ 1|2|3|4|5 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ