loading

GoogleMap APIでルート表示

軌跡データをGoogleMapに取り込む

GPSロガーなどで「移動したルート」のデータを保存する事ができます。
GoogleMapに取り込んで、ルートを表示する事ができるのですが
通常はiframe表示なので、少しばかり見た目のコントロールが利かない。
という事で、GoogleMap API V3に軌跡データを取り込んで見ました。

How To

ベースはコチラを参考にさせていただきました。
軌跡データは個人的な日帰り登山のログです。
YMAPのiOSアプリから取得、サイトから軌跡データをダウンロードしています。
ただし、YMAPで取得できるデータは .gpx という拡張子で、GoogleMapで取り扱っているのは .kml という拡張子です。
同じxmlですが、gpxはGPSのログでkmlはその中で更にkmlを読み込みしているような形式です。Googleのkmlの方が見やすいですが、YMAPは必要最小限で最適化してある、といった印象ですね。
変換が必要かどうかはさておいて、とりあえずGoogleにデータをアップします。
その為にはGoogleアカウントが必要でログインしていなければいけません。(というかGoogleMap APIもアカウントがないとkeyを取得できないですね)

イメージ

GoogleMapにアクセスし「メインメニュー」をクリックします。

イメージ

「マイプレイス」をクリック

イメージ

「マイマップ」をクリック。既に登録されているデータが表示されます。(峠マップ、とかはデフォルトで入ってるみたいです)
一番下の「マイマップを全て見る」をクリック。(もしくは、一番下の「地図を作成」をクリック)

イメージ

別窓(タブ)でマイマップが開きます。「新しい地図を作成」をクリック。
(前項の一番下の「地図を作成」をクリックと動作的には同じです)

イメージ

左上、「無題の地図」の所をクリックするとタイトルを変更できるので、適当な名前をつけましょう。
で、「インポート」をクリック。

イメージ

GPSログのデータを取り込みます。(YAMAPなら.gpxですね)

イメージ

データが取り込まれます。「共有」をクリック

イメージ

「ウェブ上で一般公開~」の箇所の「変更」をクリック

イメージ

適当な公開範囲を選択して保存。初期値は公開になっていないので注意が必要です。
基本的には「ウェブ上で一般公開」で良いと思います。

イメージ

戻ってきて「編集者による~」のチェックはつけておいた方が無難です。
で、「完了」

イメージ

左上のメニューボタンをクリック。
展開されたメニュー内から「XML/KMZにエクスポート」をクリックすると、.kmlファイルがダウンロードできます。
ちなみにここで「自分のサイトに埋め込む」を選択すると、iframeのソースコードが表示されます。
GoogleMap APIを使用できないBlogなどではコレを使って埋め込むしかありません。

保存した.kmlファイルを、適当な名称に変更し、これまた適当な箇所にアップロードします。
最後GoogleMapのjsを埋め込めばOKです。

Javascript

<script charset="UTF-8" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCB_U9fvUFb5EzA_fxFDjq7xJh04BXve68"></script>
<script charset="UTF-8">
	google.maps.event.addDomListener(window, 'load', function() {
		var mapdiv = document.getElementById("map");// htmlのid→map
		var Options = {
			zoom: 16,// MAPのサイズ
			center: new google.maps.LatLng(35.016037,136.315844),// MAP中央の座標
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			navigationControl: true,
			scaleControl: true,
			mapTypeControl: true
		};
		var map = new google.maps.Map(mapdiv, Options);
		//KMZファイルの読み込み(KMZ解凍ファイル)
		var kmlLayer = new google.maps.KmlLayer({
			url: 'https://ideacode.jp/watamuki-ryuousan.kml',// アップロードした.kmlのpath httpから指定。たぶんhttpsじゃないと動かない
			map: map// 反映先のMap(ID)を指定
		});
	});
</script>

※そのままコピペしても表示されません。api keyに制限がかかっているので。
GoogleMap APIとかで検索して、然るべきkeyを取得・埋め込みしてください。
また、地図の中央の座標は適当に取得してください。

HTML

<div id="map"></div>

CSS

#map{
	width: 100%;
	height: 720px;
}

面白い?のは、地図を表示するBOX(divとか)に
widthとheightの値が設定されていないとGoogleMapが表示されません。
正確には表示されてるけど、widthとheightが0なので見えない、という感じでしょうか。

使い所

ここまでやっておいてアレですがビジネス的にはコレといった使い方がないような;
道案内・・・にはなるのだろうか;
本件のような、移動に関する記録というか見世物的なコンテンツとしては良いと思いますが。
徒歩、ランニングやマラソン、自転車、バイクや車などでの旅とか・・・。
何か「コレ」というネタがあるなら教えてくださいm(_ _ )m

※facebookからのコンタクトでもOKです。
※既に弊社の名刺をお持ちの方は、直接メールでもOKです。

TOPに戻る