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

Full Screen

 

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開発が得意なメンバーが、最適な方法をお教えしたいと思います^^

 

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

2016.08.23

Google Maps でロングタップのイベントを発生させるには

みなさん、こんにちは!

今回は Google Maps 上でスマホやiPadなどのタブレットでロングタップに対応する方法をご紹介します。

続きを読む

2017.11.05

JavaScript APIでカスタムコントロールを試す

みなさん、こんにちは。

Google Maps JavaScript API を使用して地図を表示し、地図上に検索用のテキストボックスを置・・・

続きを読む

2017.04.23

KML を GeoJSON に変換して描画する

みなさん、こんちには。

最近、Google マイマップを使って図形を描画する機会がありました。

そこで、マイマップの機能を使い、K・・・

続きを読む

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

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)