マルティスープ
Staff Blog

2017.03.05

Google マップにKMLファイルをロードする

みなさん、こんにちは。

今回は、Google Maps に KMLファイルをロードしてマーカー、ライン、ポリゴンを表示する方法を紹介します。

KMLファイルは、Google Earth で使われていた形式で、XML形式のタグでジオメトリ情報を表現します。GEOな業界では、よく使われる形式なのですが、知らない人も多いかもしれませんね。

詳しくは、こちらをご覧ください。

https://developers.google.com/kml/?hl=ja

また Google Earth は、現在無償で使用できるようになっていますので、興味のある方は、下記サイトからダウンロードしてみてください。

https://www.google.co.jp/intl/ja/earth/

Google Maps JavaScript API で表示する場合、既にKMLファイルをロードするための「KmlLayer」 が用意されています。ファイルをロードするだけで地図上に描画が可能なので、非常に便利です！

デモ画面を作成してみました。地図上の「KMLロード」ボタンをクリックすると、マーカーとポリゴン、ラインを描画します。

KmlLayer の使い方です。google.maps.KmalLayer を使用します。

// Mapオブジェクトを生成
var map = new google.maps.Map(document.getElementById("map"), {
	zoom : 15
	center:  new google.maps.LatLng(35.692235, 139.759864),
	mayTypeId: google.maps.MapTypeId.ROADMAP
});

// InfowWindow オブジェクトを生成
var infoWindow = new google.maps.InfoWindow();

// KMLファイルをロードしてKmlLayerを生成
var kmlLayer = new google.maps.KmlLayer({
	url: 'https://maps.multisoup.co.jp/exsample/layer/kml/s01.kml', 
	suppressInfoWindows: true,
	map: map
});

// KmlLayerのオブジェクトをクリックされたときのリスナーを登録
kmlLayer.addListener('click', function(kmlEvent) {
	// InfowWindow の表示位置
	infoWindow.setPosition(kmlEvent.latLng); 
	// InfowWindow 内の表示内容	
	infoWindow.setContent('<h3>' + kmlEvent.featureData.name + '</h3>' + kmlEvent.featureData.description);
	// InfowWindow を表示
	infoWindow.open(map);
});

KMLでポイントを表示するための書き方です。

上記のデモでは、name タグと description タグの内容を InfowWindow に表示しています。

また、Style タグでアイコンの設定をしています。

<Placemark>
  <name>ポイント1</name>
  <description>テスト用ポイント１です。</description>
  <Style>
    <IconStyle>
      <Icon>
        <href>https://maps.multisoup.co.jp/exsample/common/img/ms/pin_01.png</href>
      </Icon>
      <scale>1.0</scale>
    </IconStyle>
    <LabelStyle>
      <color>ffffffff</color>
      <scale>1.0</scale>
    </LabelStyle>
  </Style>
  <Point>
    <coordinates>139.7598627047942,35.69463492190977,0</coordinates>
  </Point>
</Placemark>

今回使用した KML はコチラ

施設情報などが決まっている場合など、KMLファイルを作成してしまえば、Google Maps はもちろんのこと、他のGISソフト（Google Earth、QGIS 等）でも利用ができます！

注意点として、KMLファイルをロードするときのURLが、ローカル環境のURLでは駄目な点です。必ずグローバルな環境からアクセスできるURLが必要です。

以下がダメなURLの例です。

http://localhost/kml/01.kml
http://192.168.0.1/kml/01.kml

昔とある案件で、KMLファイルを動的に作成しGoogle Maps に表示するということがあったのですが、KmlLayer を使う想定で開発しました。

お客さまのテスト環境にインストールし、動作させようとしたときにイントラ内での利用だということがわかり、慌てて改修したことがあります。

ちなみにその時の改修は、KMLファイルをAjaxで読み込み、KMLをパースして、１個１個マーカー、ポリゴンを描画するという原始的なものでした。

しかも、KMLが３段階の階層構造で、ズームレベルによって表示、非表示を切り替える等、仕様も複雑で大変な思いをした記憶があります。

よって、セキュリティ的なことを考えた場合、プログラムを介してKMLを取得する、Basic認証などを用いログインさせてから取得する、など検討ください。

また、当たり前ですが、グローバルなURLにKMLファイルは置けないという場合は、ローカルURLでも使用可能な GeoJson という形式で一括描画する方法もあります。

GeoJsonについては、近いうちにこのブログで紹介します！

Google Maps の開発等で、お困りなことがありました、下記問い合わせよりご相談ください。GIS開発が得意なメンバーが、最適な方法をお教えしたいと思います^^