Google Maps APIで外部のKMLファイルを表示するときの注意点
はじめに
ちょっとしたテスト用にGoogle Maps上にKMLファイルを表示したくなりました。
そのときに起こった失敗を踏まえて、今後のためにメモしておきます。
KMLLayer について、詳しくは下記をご参照ください。
https://developers.google.com/maps/documentation/javascript/kmllayer
やりたいこと
自作のHTML内に、Google Maps API の KML Layer を使って地図上に独自の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
});
}
脚注
-
無料で使えるKMLファイルの置き場所としては、Google Siteの添付ファイル、DropboxのPublicフォルダ、GitHub Pages、GitHubにPushしてRAWにアクセス、などがあります。 ↩
-
無料で使えるKMLファイルの置き場所としては、Google Siteの添付ファイル、DropboxのPublicフォルダ、GitHub Pages、GitHubにPushしてRAWにアクセス、などがあります。 ↩
Author And Source
この問題について(Google Maps APIで外部のKMLファイルを表示するときの注意点), 我々は、より多くの情報をここで見つけました https://qiita.com/comocc/items/3fc93859cb3d1955398f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .