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

(通常KML編)Googleマイマップで作成したルートを表示する|Google Maps API v3

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

 

地図の表示

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

また以下は当サイト(http://gmap.pw/)のサーバー上に、
KMLデータをアップロード・公開し、そのURLを指定して表示しています。

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

 

補足

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

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

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

Sample KML Data

 

KMLデータの挙動

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

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

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

 

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

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

公開日:

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