（通常KML・GoogleDrive共有）Googleマイマップで作成したルートを表示する｜Google Maps API v3

Google Maps API(v3) を利用して地図上に道筋などを表示する際には、
外部のツールなどで作成したKMLデータを読み込んで、
地図上にポリラインやマーカーなどを表示することができます。
ここではGoogleマイマップで作成した通常のKMLデータを、
GoogleDrive上にアップロードし共有したURLからデータを読み込み、
地図上にポリラインの描画を行う例をご紹介します。

概要

1 地図の表示
2 GoogleDriveの直接URLの取得について
3 補足
- 3.1 KMLデータの挙動
4 もう少し体裁が整ったインポートがしたい
5 サンプルコード
6 参考

地図の表示

GoogleMapsAPI上にGoogleマイマップで作成、出力した
「通常のKML」データを利用して、マーカーやルートを表示している例です。
※KMLを介したルートのインポートはポリラインに変換され表示されます。

また以下は出力したKMLデータをGoogleDrive上にアップロードし、
直リンクURLを指定して表示しています。

Googleマイマップを利用してKMLデータの出力を行う手順は、
以下でご紹介しています。

地図上のルート(道順)をKMLでエクスポートする｜GoogleMyMaps

GoogleDriveの直接URLの取得について

以下の記事では以下のように書かれています。

Google Drive
共有リンク :

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

1

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

ダイレクトリンク :

https://drive.google.com/uc?export=download&id=hogehoge

1

https://drive.google.com/uc?export=download&id=hogehoge

サイトドメイン直後の /file/d を /uc?export=download&id= に変更し、末尾の /view?usp=sharing を削除するとダイレクトリンクが作成されるが、25MB以上のファイルであれば、『Google ドライブではこのファイルのウィルススキャンを実行することはできません』が表示されてダウンロードできない。

（引用）OneDrive / DropBox で直リンを作る | 暗中模索

この方法に当てはめてURLの置き換えを行うと、
私がKMLファイルをGoogleDriveへアップロードし取得したURLは以下URLです。

上記のid部分(hogehoge)は、以下の赤字の部分に当てはまります。

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

そして直リンクのURL形式に変換したものが以下になります。

https://drive.google.com/uc?export=download&id=0B1hBFppfY28uTk95d3ZmS2RQamc

このURLにてKMLLayerインスタンスのURLオプション指定することで、
独自のデータ公開サーバーなどを必要とすることなく、
KMLデータの公開を行う事ができます。

補足

KMLデータをGoogleMapsAPIで表示すること自体は、
KmlLayerクラスのインスタンスを生成する際に、KMLデータのURLを指定するだけです。

その為、特に難しい事を考える必要はありません。
逆に、表示するルート（ポリラインに変換）をカスタマイズする術がないので、
KMLデータとしての完成度が問われる利用方法と言っていいでしょう。

実際にURL指定を行っている部分は以下の１行です。
これは前述の通り、以下のファイルを指定しています。

Sample KML Data

url: 'https://drive.google.com/uc?export=download&id=0B1hBFppfY28uTk95d3ZmS2RQamc',

1	url: 'https://drive.google.com/uc?export=download&id=0B1hBFppfY28uTk95d3ZmS2RQamc',

KMLデータの挙動

上記はGoogleマイマップから「通常のKML」として、
出力を行ったもので、KMLデータ自体に描画データを保持しています。

以下の記事では「リンクネットワークKML」による、
データ出力と読み込みを行っていますが、想定した更新は発生しませんでした。

現時点で、元となったGoogleマイマップは以下のように変更済みですが、
読み込んでいるKMLデータはマイマップ側のルートを更新する前のデータです。

もう少し体裁が整ったインポートがしたい

KML Layerクラスを利用してKMLの読み込みを行った場合、
どうしてもポリラインなどの細かな調整がKML依存の為、やりづらい面があります。

リファレンスを熟読してKMLを作成すればいいのですが、
普通にポリラインの描画のようにプログラムから処理する方がなじみやすいと思います。

そんな時には、KMLデータの出力を行って、
得られたGPS座標のみを抜き出して、プログラムに貼り付けて描画すると楽です。

私はこの方法の方が気に入っています。

マイマップで作成したKMLからポリラインGPS座標を取得・加工する｜GoogleMyMaps

サンプルコード

HTML

HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。

<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div>

1	<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div>

CSS

CSSではclass=”aspect”に対して、幅100%を指定し、高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。

<style type="text/css">
	.aspect{
		width:100%;
		height:50vw;
	}
	.aspect_normal,
	.aspect_dot,
	.aspect_key,
	.aspect_dotkey{
		width:100%;
		height:25vw;
	}
	#gmap_canvas,
	#gmap_canvas_normal,
	#gmap_canvas_dot,
	#gmap_canvas_key,
	#gmap_canvas_dotkey,
	div.g_canvas{
		width:100%;
		height:100%;
	}

</style>

.aspect{

width:100%;

height:50vw;

}

.aspect_normal,

.aspect_dot,

.aspect_key,

.aspect_dotkey{

width:100%;

height:25vw;

}

#gmap_canvas,

#gmap_canvas_normal,

#gmap_canvas_dot,

#gmap_canvas_key,

#gmap_canvas_dotkey,

div.g_canvas{

width:100%;

height:100%;

}

</style>

JavaScript

KMLレイヤクラスのインスタンスを生成し、
urlオプションに対して、公開済みのKMLデータURLを指定しています。

<script type="text/javascript">
	//global
	var markers = [];
	var gmap_canvas;
	var map_div = document.getElementById("gmap_canvas");
	var points = [
	  	{location:"姫路城", latlng:{lat: 34.839450, lng:134.693903},icon: "https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container-bg_4x.png,icons/onion/SHARED-mymaps-pin-container_4x.png,icons/onion/1899-blank-shape_pin_4x.png&highlight=ff000000,e65100,ff000000&scale=2.0"},
		{location:"三の丸広場南（姫路城）", latlng:{lat:34.836508 , lng:134.693319},icon: "https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1535-camera-photo_4x.png&highlight=ff000000,0288d1,ff000000&scale=2.0"}
			];
	var lcnt = points.length;
	var pline;

	//地図を描画
	function init(){
		gmap_canvas = new google.maps.Map(map_div,{
			center: points[0].latlng,
			zoom : 17,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		});

		//KMLファイルの読み込み（通常KML）
		  var kmlLayer = new google.maps.KmlLayer({
			    url: 'https://drive.google.com/uc?export=download&id=0B1hBFppfY28uTk95d3ZmS2RQamc',
			    map: gmap_canvas
			  });

	}

	google.maps.event.addDomListener(window,"load",init);
	$('#ver').text(google.maps.version);
</script>

//global

var markers = [];

var gmap_canvas;

var map_div = document.getElementById("gmap_canvas");

var points = [

{location:"姫路城", latlng:{lat: 34.839450, lng:134.693903},icon: "https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-pin-container-bg_4x.png,icons/onion/SHARED-mymaps-pin-container_4x.png,icons/onion/1899-blank-shape_pin_4x.png&highlight=ff000000,e65100,ff000000&scale=2.0"},

{location:"三の丸広場南（姫路城）", latlng:{lat:34.836508 , lng:134.693319},icon: "https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1535-camera-photo_4x.png&highlight=ff000000,0288d1,ff000000&scale=2.0"}

];

var lcnt = points.length;

var pline;

//地図を描画

function init(){

gmap_canvas = new google.maps.Map(map_div,{

center: points[0].latlng,

zoom : 17,

mapTypeId : google.maps.MapTypeId.ROADMAP

});

//KMLファイルの読み込み（通常KML）

var kmlLayer = new google.maps.KmlLayer({

url: 'https://drive.google.com/uc?export=download&id=0B1hBFppfY28uTk95d3ZmS2RQamc',

map: gmap_canvas

});

}

google.maps.event.addDomListener(window,"load",init);

$('#ver').text(google.maps.version);

</script>

別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script>

1 2	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script>

参考

以下がリファレンス等参考になるサイトです。

とはいっても、KML Layersクラスで指定できるオプションは、
さほどなく、表示するラインやマーカーのオプションを変更するような記述は見当たりません。

あくまでもKMLデータ側で見栄えを含めた調整を、
事前に行っておくと言う利用方法が無難です。

KML Layers | Google Maps JavaScript API | Google Developers

KmlLayer class｜Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers

KmlLayerOptions object specification｜Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers

KmlLayerMetadata object specification｜Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers

KmlLayerStatus constants｜Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers

KmlMouseEvent object specification｜Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers

KmlFeatureData object specification｜Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers

KmlAuthor object specification｜Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers