（KMZ編）Googleマイマップで作成したルートを表示する｜Google Maps API v3
Google Maps API(v3) を利用して地図上に道筋などを表示する際には、
外部のツールなどで作成したKMLデータを読み込んで、
地図上にポリラインやマーカーなどを表示することができます。
ここではGoogleマイマップで作成した通常のKMZデータを読み込み、
地図上にポリラインの描画を行う例をご紹介します。
概要
地図の表示
GoogleMapsAPI上にGoogleマイマップで作成、出力した
「通常のKMZ」データを利用して、マーカーやルートを表示している例です。
※KMLを介したルートのインポートはポリラインに変換され表示されます。
また以下は当サイト（http://gmap.pw/）のサーバー上に、
KMLデータをアップロード・公開し、そのURLを指定して表示しています。
Googleマイマップを利用してKMZデータ等の出力を行う手順は、
以下でご紹介しています。
補足
KMLデータをGoogleMapsAPIで表示すること自体は、
KmlLayerクラスのインスタンスを生成する際に、KMLデータのURLを指定するだけです。
しかしKMZファイルはそのまま指定しても何も描画はされません。
それは、KMZファイルはKMLファイルとアイコンデータの圧縮ファイルだからです。
A KMZ file is a zipped KML file. Unzip it, and you can edit it in any text editor, though it would be easier in an XML editor, since KML is just XML.
（引用）Google Earth: How do you read the raw data in a KMZ file? – Quora（要ログイン）
KMZファイルは圧縮されたKMLファイルである。解凍する。（以下略）
実際、以下のKMZファイル（直接はバイナリデータで開けない）を、
拡張子「.KMZ」を「.zip」に変更し解凍すると、以下のようなファイルが生成されます。
（例）
|
1 2 3 4 5 |
linknetwork_kml-normal ├ doc.kml └ images ┬ icon-1.png ├ icon-2.png └ icon-3.png |
画像はそれぞれGoogleマイマップで利用していた、
新しいGoogleマイマップの標準マーカー画像と、
ルートを表示していた「A」「B」の丸画像です。
※実際のマイマップは本投稿下部で埋込表示しています。
http://gmap.pw/mapsapi/kml/linknetwork_kml-normal/images/icon-1.png
http://gmap.pw/mapsapi/kml/linknetwork_kml-normal/images/icon-1.png
http://gmap.pw/mapsapi/kml/linknetwork_kml-normal/images/icon-1.png
ここで、画像ファイルを無視し、生成された「doc.kml」ファイルを、
そのままKMLLayerクラスのインスタンスに対して、url指定を行うだけです。
|
1 |
url: 'http://gmap.pw/mapsapi/kml/linknetwork_kml-normal/doc.kml', |
これで表示しているのが上記のGoogleMapsAPIによる表示です。
アイコンの表示が若干甘い印象はぬぐえませんが、
Googleマイマップで利用される標準的なアイコンであれば、
他のKMLデータを読み込んだ時と比べて、再現性が高い事が分かります。
KMZデータの挙動
上記はGoogleマイマップから「通常のKMZ」として、
出力を行ったもので、KMZデータ自体に描画データとマーカー画像を保持かつ圧縮されています。
ZIPで一緒に圧縮されて格納されていた画像ファイルを利用せず、
そのまま「doc.kml」をインポートするだけでも、
“恐らく”Googleマイマップ標準アイコンであれば表示される模様です。
なお、GoogleMapsAPIで表示した際に、
各マーカーに表示されていた画像の各URLは以下から取得され表示されています。
その為、一緒に自サーバーに「images/」フォルダに、
画像をアップロードしたとしても利用されていません。
標準マーカーアイコン表示URL
「A」マーカアイコン表示URL（Data URLスキーム表示）
「B」マーカアイコン表示URL（Data URLスキーム表示）
出力元としたGoogleマイマップでの表示は以下になりますので、
再現性は上がっているものの、
GoogleMapsAPIの表示では拡大縮小するとマーカーが旧来のデザインに戻るなど、
若干うまく動作していない部分が残ってしまいます。
もう少し体裁が整ったインポートがしたい
KML Layerクラスを利用してKMLの読み込みを行った場合、
どうしてもポリラインなどの細かな調整がKML依存の為、やりづらい面があります。
リファレンスを熟読してKMLを作成すればいいのですが、
普通にポリラインの描画のようにプログラムから処理する方がなじみやすいと思います。
そんな時には、KMLデータの出力を行って、
得られたGPS座標のみを抜き出して、プログラムに貼り付けて描画すると楽です。
私はこの方法の方が気に入っています。
サンプルコード
HTML
HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></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%として指定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |
JavaScript
KMLレイヤクラスのインスタンスを生成し、
urlオプションに対して、公開済みのKMLデータURLを指定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<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 }); //KMZファイルの読み込み（KMZ解凍ファイル） var kmlLayer = new google.maps.KmlLayer({ // url: 'http://gmap.pw/mapsapi/kml/linknetwork_kml-normal/doc.kml', //Direct KMZ file link not work. url: 'http://gmap.pw/mapsapi/kml/linknetwork_kml-normal/doc.kml', map: gmap_canvas }); } google.maps.event.addDomListener(window,"load",init); $('#ver').text(google.maps.version); </script> |
別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。 ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。
|
1 2 |
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script> |
参考
以下がリファレンス等参考になるサイトです。
とはいっても、KML Layersクラスで指定できるオプションは、
さほどなく、表示するラインやマーカーのオプションを変更するような記述は見当たりません。
あくまでもKMLデータ側で見栄えを含めた調整を、
事前に行っておくと言う利用方法が無難です。
公開日：
