Webページに地図を埋め込む

以下のコードはブラウザで表示させるためのHTML文書です．
KMLファイルの内容をWebブラウザで表示させるためには，HTML文書中でKMLファイルを呼び出す記述を行います．
HTMLを作成するにはエディタが必要で，エディタはどのようなものでもOKですが，文字コードをUnicode（UTF-8）としてファイルを作成する必要があります．（Google maps APIを使っているページは基本的に全てUTF-8を利用しなければなりません．）このため，UTF-8に対応したエディタ（例えば，「秀丸」，「ez-HTML」など）を利用します．
メモ帳などで日本語（Shift-JIS）形式で保存してしまうと，アクセス時に日本語の文字化けが発生しますので，注意が必要です．ez-HTMLの場合，メニューバーから「ファイル」→「文字コードの設定（高度）」でUTF-8を指定します．また，メニューバーから「ファイル」→「文字コードを指定して保存」で，保存する文字コードとしてUTF-8を選択して保存します．

HTMLファイルのサンプルコード



<!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"
         xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Google Map</title>

	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp; 
	key=（ここにKEYを入力）" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <script type="text/javascript">
    //<![CDATA[
    var map;
    function onLoad() {
      map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(35.043279, 135.745332), 17);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GOverviewMapControl());
      map.setMapType(G_HYBRID_MAP);

      var gx = new GGeoXml("（KMZファイルがアップロードされている場所を，
      URL形式で入力）");
      map.addOverlay(gx);
    }
    //]]>
    </script>
  </head>
  <body onload="onLoad()" style="margin:0px; padding:0px;">
    <div id="map"
         style="width:500px; height:500px; margin:0px; padding:0px;"></div>
  </body>
</html>

ポイント

上のコード中，GGeoXmlを利用してオブジェクトを生成しています．これは，KMLファイルを表示するための Google maps APIで，GGeoXmlを利用するとKMLファイルを読み込めます．オブジェクトを生成するGGeoXmlの行は，具体的には以下のように指定します．

var gx = new GGeoXml("http://www.hishiyama.com/informatics
/contents/googleearth/network/daitokuji_tacchu.kmz");

HTMLファイルの公開

（オフラインの場合は，この項は飛ばして次項へ進みます）

上のサンプルコードを，拡張子html（ファイル名：～.html）で保存します．
このファイルをFTPでWebサーバの任意のホルダにアップロードします．
Web上にアップロードする場合，MIMEタイプの設定を行います．MIMEの設定については，こちらを参考にしてください．

アップロードが完了したら，当該サイトにアクセスし，KMLファイルをブラウザで開きます．自動的にGoogle Earthが立ち上がり，KMZファイルの内容が表示されます．
サンプル（KML）サイトはこちらです．
サンプル（KMZ）サイトはこちらです．

以下はGPSデータと画像データを関連づけた上で，KMZファイルとして生成したものを地図上に表示させた例です．画像データはあらかじめサーバ上にアップロードしておきます．GMM2.exeでこの画像データに関する情報を編集する際，画像をアップロードしたURLを指定しておきます．このURLを指定した後に，KMZファイルを生成します．
こうして作成したKMZファイルを指定することで，Web上で表示させた地図サービス上のアイコンをクリックすると，所定の画像データを呼び出すことができるようになります．
apisample3.html

サンプル（KMZ）サイトはこちらです．アイコンをクリックすると，画像が表示されます．

【オフライン】HTMLファイルをブラウザで表示する

上のサンプルコードを，拡張子html（ファイル名：～.html）で保存します．
このファイルをダブルクリックすると，ブラウザが起動され，KMLファイルの内容が表示されます．

演習課題

自分のWebサイトでGoogle Maps APIを利用するためのキーを取得していない場合は，取得する．
Google Maps API
任意のランドマークについて緯度と経度を調査する．緯度と経度の調査方法がわからない場合はこちらの演習課題の項を参照すること．
調査した緯度と経度を利用し，KMLファイルを作成する．
作成したKMLファイルをFTPを利用してWebサーバにアップする．MIME設定も行うこと．
当該サイトにアクセスし，KMLファイルで指定したスポットが表示されることを確認する．
このKMLファイルをブラウザで表示させるため，Google Maps API （GgeoXml）を用いてHTML文書を作成する．
作成したHTMLファイルをFTPを利用してWebサーバにアップする．
当該サイトにアクセスし，ブラウザでHTMLが意図どおりに表示されることを確認する．

KMLファイル，KMZファイルをWebブラウザで表示させる

Google Maps APIについて

準備

KML（KMZ）ファイルの準備

KML（KMZ）ファイルを呼び出すHTMLを記述します

ポイント

HTMLファイルの公開

【オフライン】HTMLファイルをブラウザで表示する

演習課題