Help us understand the problem. What is going on with this article?

Google Maps APIで外部のKMLファイルを表示するときの注意点

More than 5 years have passed since last update.

はじめに

ちょっとしたテスト用にGoogle Maps上にKMLファイルを表示したくなりました。
そのときに起こった失敗を踏まえて、今後のためにメモしておきます。

KMLLayer について、詳しくは下記をご参照ください。
https://developers.google.com/maps/documentation/javascript/kmllayer

やりたいこと

自作のHTML内に、Google Maps API の KML Layer を使って地図上に独自のKMLファイルを表示したい。

mm.png
図. KMLで東京駅にマーカーを表示した例

やりかた

基本的に公式の KML Layers に書かれている方法でOKです。

注意点

ここからは、先に挙げた東京駅にマーカーを表示する部分のJavaScripを例に話を進めます。

NGケース1. KMLファイルは外部から見えない場所にある

Webサーバーをlocalhostで運用中にnew google.maps.KmlLayer()url:'http://localhost/tokyost.kml' とか書いてしまいがちですが、これだとうまくいきません。

  • ダメな例
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.681269, lng: 41.876}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://localhost/tokyost.kml', // NG
    map: map
  });
}

NGケース2. Google Driveの共有リンクを指定している

KMLファイルの置き場所としてGoogleドライブを選び、共有機能を使ってリンクを取得すると、次のようなURLが得られるので一見使えそうですがNGです。
例えば、

https://drive.google.com/file/d/0B9BZNJJL012qTjVWT0FQdlRvbFU/view?usp=sharing

このリンクはあくまでGoogle Drive内で表示するためのものなので、KmlLayerのurlに指定してもうまくいきません。

  • ダメな例
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.681269, lng: 41.876}
  });

  var ctaLayer = new google.maps.KmlLayer({
      url: 'https://drive.google.com/file/d/0B9BZNJJL012qTjVWT0FQdlRvbFU/view?usp=sharing', // NG
      map: map
  });
}

結論

以上を踏まえて、KMLファイルは外部から直接アクセス可能なWebサーバー1に置きましょう。

  • KMLファイルをGoogle Siteに置いた例
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 35.681269, lng: 41.876}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'https://sites.google.com/a/foobarbaz/test/tokyost.kml',
    map: map
  });
}

脚注


  1. 無料で使えるKMLファイルの置き場所としては、Google Siteの添付ファイル、DropboxのPublicフォルダ、GitHub Pages、GitHubにPushしてRAWにアクセス、などがあります。 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした