地図上に折線（ポリライン）を引いて表示する｜Google Maps API v3
Google Maps API(v3) を利用して地図上に道筋などを表示する際に
利用することができるのがライン(線)です。
ここでは道順などを紹介する際の複数座標を結んだ
折線を表示する例をご紹介します。
地図の表示
以下は指定した座標を結ぶポリラインを表示しています。
便宜上「姫路駅大手門(西行)」バス停から、姫路城入城口改札までの、
徒歩ルートを表示しています。
実際に利用するにはバス停アイコンや入城口にピンを立てたりすることと思いますが、
ここではあくまでもポリラインのみを表示しています。
補足
ポリラインの生成には線をむすぶGPS座標をリストで渡すことで、
指定の座標間を結んだ直線を引くことができます。
座標を定義している部分は以下のようになっています。
「path:」で指定する連想配列で指定します。
|
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 |
var pline = new google.maps.Polyline({ map:gmap_canvas, path:[new google.maps.LatLng(34.8353461,134.6935442), new google.maps.LatLng(34.8355046,134.6928817), new google.maps.LatLng(34.8358304,134.6926188), new google.maps.LatLng(34.8358745,134.6926188), new google.maps.LatLng(34.8359361,134.692871), new google.maps.LatLng(34.8360198,134.6930024), new google.maps.LatLng(34.8360484,134.6930775), new google.maps.LatLng(34.836055,134.6932089), new google.maps.LatLng(34.8360946,134.6933055), new google.maps.LatLng(34.8361519,134.6933457), new google.maps.LatLng(34.8362905,134.6933457), new google.maps.LatLng(34.836317,134.6932358), new google.maps.LatLng(34.8364094,134.6930507), new google.maps.LatLng(34.8365613,134.6928227), new google.maps.LatLng(34.836722,134.69271), new google.maps.LatLng(34.8368806,134.6926939), new google.maps.LatLng(34.8381266,134.6926805), new google.maps.LatLng(34.8382433,134.6926859), ], strokeColor: "rgb(0 ,51,204)", //線色(def:#000000) strokeOpacity: 0.5, //透明度0～1(def:1) strokeWeight: 5, //px指定（def:1) zIndex: 1 //重なり順 } ); |
座標を定義する連想配列の他にも様々なオプションを指定する事ができます。
その他のオプションについては、後述の「参考」に記載するリンク先で確認できます。
strokeColor: 文字色指定
strokeOpacity: 透明度
strokeWeight: 線の太さ
zIndex: 重なり順
サンプルコード
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
Polylineインスタンスを生成時に、
対象のmapインスタンスをパラメータで渡します。
同時にラインを描画する座標を指定し、表示の色・透明度・重なり順を指定しています。
|
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 33 34 35 36 37 38 39 40 |
<script type="text/javascript"> function init(){ var map_div = document.getElementById("gmap_canvas"); var gmap_canvas = new google.maps.Map(map_div,{ center: new google.maps.LatLng(34.839450, 134.693903), zoom : 16, mapTypeId : google.maps.MapTypeId.ROADMAP }); //create polyline var pline = new google.maps.Polyline({ map:gmap_canvas, path:[new google.maps.LatLng(34.8353461,134.6935442), new google.maps.LatLng(34.8355046,134.6928817), new google.maps.LatLng(34.8358304,134.6926188), new google.maps.LatLng(34.8358745,134.6926188), new google.maps.LatLng(34.8359361,134.692871), new google.maps.LatLng(34.8360198,134.6930024), new google.maps.LatLng(34.8360484,134.6930775), new google.maps.LatLng(34.836055,134.6932089), new google.maps.LatLng(34.8360946,134.6933055), new google.maps.LatLng(34.8361519,134.6933457), new google.maps.LatLng(34.8362905,134.6933457), new google.maps.LatLng(34.836317,134.6932358), new google.maps.LatLng(34.8364094,134.6930507), new google.maps.LatLng(34.8365613,134.6928227), new google.maps.LatLng(34.836722,134.69271), new google.maps.LatLng(34.8368806,134.6926939), new google.maps.LatLng(34.8381266,134.6926805), new google.maps.LatLng(34.8382433,134.6926859), ], strokeColor: "rgb(0 ,51,204)", //線色(def:#000000) strokeOpacity: 0.5, //透明度0～1(def:1) strokeWeight: 5, //px指定（def:1) zIndex: 1 //重なり順 }); } 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> |
参考
ポリラインの生成に関してのリファレンスは以下で確認できます。
図形 | Google Maps JavaScript API | Google Developers
Simple Polylines | Google Maps JavaScript API | Google Developers
多くの接点があるポリライン座標を効率的に作成するには？
こうしたポリラインを作成するに当たっては、
線と線のGPS座標をすべて指定する必要があります。
線を引きたい場所のGPS座標がすぐにわかる人はまずいないでしょう。
データが既にあるような場合は別にして、
どうにかしてGPS座標データを集める必要があります。
私は以下のような方法を利用しています。
公開日：
最終更新日：2017/01/26
