MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2017.03.05

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

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ロード」ボタンをクリックすると、マーカーとポリゴン、ラインを描画します。

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>テスト用ポイント1です。</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をパースして、1個1個マーカー、ポリゴンを描画するという原始的なものでした。

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

 

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

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

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

 

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

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2018.06.28

新プランの Places API を調べてみました

みなさん、こんにちは。

新プラン Google Maps Platform の中で、 Places API の価格体系は、非常に細かく分類・・・

続きを読む

2017.03.22

Google マップで「竹島」と表示する方法は?

みなさん、こんにちは。

Google Maps JavaScript API は、みなさんご存知のとおり多言語に対応した地図です。そのため、l・・・

続きを読む

2016.08.25

Googleマップで過去の航空写真を見る

みなさん、こんにちは。

国土地理院が提供するタイル地図とGoogleマップの連携方法を説明します。

今回は、Googleマ・・・

続きを読む

 - GIS, Google Maps JavaScript API, スタッフ日記