Google Maps API・マイマップの使い方・活用法をご紹介しています。

(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」に変更し解凍すると、以下のようなファイルが生成されます。

(例)

Sample KMZ Data

画像はそれぞれ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指定を行うだけです。

Sample doc.KML Data

 

これで表示しているのが上記のGoogleMapsAPIによる表示です。

アイコンの表示が若干甘い印象はぬぐえませんが、
Googleマイマップで利用される標準的なアイコンであれば、

他のKMLデータを読み込んだ時と比べて、再現性が高い事が分かります。

 

KMZデータの挙動

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

ZIPで一緒に圧縮されて格納されていた画像ファイルを利用せず、
そのまま「doc.kml」をインポートするだけでも、
“恐らく”Googleマイマップ標準アイコンであれば表示される模様です。

なお、GoogleMapsAPIで表示した際に、
各マーカーに表示されていた画像の各URLは以下から取得され表示されています。

その為、一緒に自サーバーに「images/」フォルダに、
画像をアップロードしたとしても利用されていません。

標準マーカーアイコン表示URL

https://mt.googleapis.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,0288D1&scale=2.0

「A」マーカアイコン表示URL(Data URLスキーム表示)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAB+0lEQVQ4T62Uv2sTYRjHP08odexFFyeriyIopOgm0lP8iRbT/6ABjYpKu0idanVwEdeip9QEBV2kWQW1l0kcxKhUBxG1uJqcIIIR75G8yaW55E04wRuP7/vh+/z6Cv/5k34854y6qZBxFVyUjNEJFVH8MEU5uCm+7W0P0JlSR4a5K0J2kHlVSlonFxQk6NTFgM4pzUiKJYHNSTqh8FlDJoPbUon0baBxto5XSWERwEB/MRY5bQPTp7UkcKLb2d5tsJCDjSOwWIbZh1bvheotyTXbDJgBKMs26aUJmD4Mw0PwehX2X7M3IxT2NQZlgOvzOo9w2SZ9cA72bIXgZxM6fQ8ev7EolStVT+YNMJ1XX4TxbtnuLXDnJCjw4iNkd4H3DOYe9QJVKdc8cSNgIMJIt2zmCFw8BsvvwH8Pc5Ow8hWOXrcCg5on6YHA+2fh4E54/gG+/QB3O/z+Yy9ble81T5y+JY+NwmIeNm2Iu2kAF57A1aX4/1jJtqFcOASzE/B2da3EaOIvP8HxG11ldw7FtjaN6R7YEd+9aCeHUnC+CE9X1qCxtTGT7rPYSU4QpVj1ZKq92Ga5m6FQEWE0EaQlUuWL1sn0nJ6BNsJBKCWFGpiStYZD5KoVEgXbXcecK8WwzszA+Op80ApYV8GFVsBCRTAB6ycO2H/pn037F42hzRWNKb92AAAAAElFTkSuQmCC

「B」マーカアイコン表示URL(Data URLスキーム表示)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAB8UlEQVQ4T62UMWgTYRTHfy/VFETwUnBxsergGgVxUXpOTmJ1FaEZrOJgddJBsN1chLqInmBSS6FQ0ICIOHlRqG7NJkUHndySE1RMKvfkvuSLl955XsEb3/2/H//vvff9hf/8yd94ziV1CyETKrgoZaMTmqL4YYFGcF/8tLMJoDOljhSpijCZZV6VunapBDUJ4rohoHNBy1LgqcB4nk4ofNKQM8FDaVr9AGicjbKWF2YBBtrhkHU6AJYual3gtBUePwj3KrDH6VVUIfgBy+/g5krCf631QCq9NgNmAMqruMwCdxTBfw/FbRDVRGDuCTxqDEND4UQ0KAMcm9ZZhFtpwKh2uQpv1qF+DY4egLsv4fazTS6VuZYnswZYmlZfhIks4PYRuHMOxnamO1Sl0fbEtcBAhF1pQNvD6N+vEJ6vwZXH8K0z7FCVoO1J6Z/AkQLMv4DvHTh/DA6PQ/U1XF9OAL+2PXFyXznq4Y1TMHMS3n6Es/MJ4J8rZw3FTrmzAUf2w77dsLQKM4sZQ8lam3gPf27A6ofeHq5/yVgbM+lNi53n6Q00ykLLk6nBYpvl7oVCU4S9W4Gp8lm7lBNPz0CjcBDqeaEGpkymhoN11Q+JWvxdpzpWFsIuVzPjK36wH7Cuggv9gIWmYALWzx2wW+lfmvY3y5PUFcrSyRYAAAAASUVORK5CYII=

 

出力元としたGoogleマイマップでの表示は以下になりますので、
再現性は上がっているものの、

GoogleMapsAPIの表示では拡大縮小するとマーカーが旧来のデザインに戻るなど、
若干うまく動作していない部分が残ってしまいます。

 

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

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

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

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

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

 

サンプルコード

HTML

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

 

CSS

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

JavaScript

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

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

 

参考

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

とはいっても、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

公開日:

コンテンツ
すべて展開 | すべて省略