地図を表示させてみる

地図を表示させるための要点を以下の3つにまとめた。これらはリスト1のコメント(1)から(4)に対応しているので、ソースコードを確認していただきたい。

  1. ライブラリのスクリプトは事前にダウンロードせずURLで指定
  2. 地図本体はVEMapクラスで表される
  3. 地図データの読み込みは<body>のonload属性で実行
  4. 地図の大きさはstyle属性のCSSで指定

リスト1 Virtual Earth Map Controlによる地図の表示例(XHTML 1.0 Strict)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <title>Virtual Earth Map Controlで地図を表示</title>
    <!-- (1) スクリプトのURIは固定(事前にダウンロードしておかなくてよい) -->
    <script type="text/javascript"
            src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
    <script type="text/javascript">// <![CDATA[
      // (2) 地図本体はVEMapクラス
      var veMap = null;

      function displayVEMap()  {
        veMap = new VEMap( 've-map' );  // <div id="ve-map"></div>に表示
        veMap.LoadMap();                // 地図データの読み込み開始
      }

      function disposeVEMap()  {
        if ( veMap != null )  veMap.Dispose();
      }
    // ]]></script>
  </head>
  <!-- (3) 地図データの読み込みはonload属性で -->
  <body onload="displayVEMap()" onunload="disposeVEMap()">
    <h3>Virtual Earth Map Controlで地図を表示</h3>
    <!-- (4) 地図の大きさはstyle属性で指定する -->
    <div id="ve-map" style="position : relative; width : 350px;  height : 350px;"></div>
  </body>
</html>

【図4】地図の表示例 (デフォルトはアメリカ合衆国付近、そこから日本の位置まで地図をドラッグする際は太平洋をまたげないので注意)