（リンクネットワーク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 |
url: 'http://gmap.pw/mapsapi/kml/linknetwork_kml-linknetwork.kml', |
リンクネットワークKMLの挙動
上記はGoogleマイマップから「リンクネットワークKML」として、
出力を行ったもので、KMLデータ自体に細かなデータは保持していません。
<link>タグにてKMLデータのURLが提供されているだけです。
それでも上記のようにKMLの表示は行えますが、
思想としては元のGoogleマイマップを変更した場合に、
リンクネットワークKMLデータが自動的に更新されてくるような思想なのだと思いますが、
現状でそのような動作を確認することができませんでした。
現時点で、元となったGoogleマイマップは以下のように変更済みです。
となるとこの「リンクネットワークKML」
どういった使い道があるのだろうと疑問に感じてしまいます。
なお、ヘルプではインストールしたGoogleEarthアプリで、
この「リンクネットワークKML」をインポートして使うという例が紹介されています。
実際にやってみたものの、Googleマイマップを変更しただけでは、
GoogleEarth側のデータも特に変更される兆候は見られませんでした。
もう少し体裁が整ったインポートがしたい
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 |
<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: 'http://gmap.pw/mapsapi/kml/linknetwork_kml-linknetwork.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データ側で見栄えを含めた調整を、
事前に行っておくと言う利用方法が無難です。
KML Layers | Google Maps JavaScript API | Google Developers
公開日：
