Tips&Tutorials

ホーム > コンテンツ > Google Earth

KMLファイル，KMZファイルをWebから利用する

以下は，KMLファイル（またはKMZファイル）をWeb環境で利用する方法です．あらかじめ作成したKMLファイルをWebサーバで公開し，URLをGGeoXmlに渡せば自作の地図をブラウザ経由で見ることができます．

１．Webページに表示させたいKML（KMZ）ファイルを用意する

Webページに表示させたいKML（KMZ）ファイルをサーバ上にアップロードします．アップロードしたサーバ上のホルダを把握します．

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

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

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>

Google Maps APIを使うにはサイト毎にキーが必要です．キーの取得は以下から行います．
Google Maps API
登録画面には，使う予定のURLを入力する部分があります．ここで入力したURLでしかキーを利用することはできないので，正しいURLを入力して取得するようにします．取得後は，各自で取得したキーに変更して下さい．なお，Google MAPS APIを使うためにはGoogleアカウントが必要です．持っていない場合にはメールアドレスを登録することで取得できます．

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


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

【オンライン】４．HTMLをFTPでサーバアップします

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

上のサンプルコードを，拡張子html（ファイル名：～.html）で保存します．
このファイルをFTPでWWWサイトにアップロードします．
Web上にアップロードする場合，MIMEタイプの設定を行います．
Web上に，以下を記述した「.htaccessファイル」を置きます．


AddType Application/vnd.google-earth.kml+xml .kml
AddType Application/vnd.google-earth.kmz .kmz

「.htaccessファイル」は，http://www.aaa.com/　として参照できる場所に置いてください．
配下にあるすべてのホルダに対して効力を発揮します．

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

【オフライン】４．HTMLファイルをブラウザで表示させてみます

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