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

はじめに

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

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

やりたいこと

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

図. 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サーバー¹に置きましょう。

• 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にアクセス、などがあります。 ↩