【Maps JavaScript API】マップにラインを追加してみよう

今回はGoogle Maps JavaScript APIで表示されるマップにラインを追加する方法について解説したいと思います。
まず、Google Maps JavaScript API では、地図上で各座標をつなぐ線のことを「ポリライン」と呼びます。

地図上にラインを追加するには、このポリラインを使用していきます。
Polyline クラスは、ポリラインを表示するためのクラスです。LatLng 位置の配列の順序でラインが作成されます。
また、Polyline コンストラクタでは、ラインの LatLng 座標や、ポリラインの色や太さなどのスタイルを指定します。
作成時に指定したプロパティは、構成後に変更することが可能です。

それでは、Polyline options オブジェクで、ポリラインの線の色、太さ、透明度を指定する方法を見てみましょう。

 //Polyline コンストラクタにて座標とスタイルを指定
 var flightPath = new google.maps.Polyline({
  path: flightPlanCoordinates, //ポリラインの配列
  strokeColor: '#FF0000', //色（#RRGGBB形式）
  strokeOpacity: 1.0, //透明度　0.0～1.0（デフォルト）
  strokeWeight: 2 //太さ（単位ピクセル）
 });

ポリラインのプロパティ

プロパティ	説明
strokeColor	#RRGGBB形式の16進数 HTML カラーを指定します。Polyline クラスでは色名（Redなど）は使用できません。
strokeOpacity	ラインの色の不透明度指定します。（ 0.0 〜 1.0 の間の数値）デフォルト値は 1.0 。
strokeWeight	ラインの幅をピクセル単位で指定します。
editable	ユーザーが図形を編集できるかどうかを指定します。
draggable	ユーザーにラインのドラッグを許可するか否かを指定します。

ポリラインを追加する

次のサンプルは、4点の座標を繋ぐポリラインを地図上に追加しています。
ソースをそのまま使用しても表示できますので、まずはコピーしてポリラインを追加してみましょう。

<script>
var map;
function initMap() {
 var myLatlng = new google.maps.LatLng(35.681167,139.767052);
 //インスタンスを作成
 map = new google.maps.Map(document.getElementById('map'), {
  //地図のオプション
  //初期のズームレベル
  zoom: 12,
  //地図の中心点
  center: myLatlng
 });

 //ラインの LatLng 座標を指定
 var flightPlanCoordinates = [
  {lat: 35.681167, lng: 139.767052},
  {lat: 35.671167, lng: 139.767052},
  {lat: 35.661167, lng: 139.767052},
  {lat: 35.651167, lng: 139.767052}
 ];

 //Polyline コンストラクタにて座標とスタイルを指定
 var flightPath = new google.maps.Polyline({
  path: flightPlanCoordinates,  //ポリラインの配列
  geodesic: true,
  strokeColor: '#FF0000', //色（#RRGGBB形式）
  strokeOpacity: 1.0, //透明度　0.0～1.0（デフォルト）
  strokeWeight: 2 //太さ（単位ピクセル）
 });

 //Polyline をマップにセット
 flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

サンプルページはこちら
以上でマップにポリラインを追加する方法の解説を終わります。
単純なのポリラインは、それぞれの座標とラインのスタイルを指定することで簡単に追加することができます。
このポリラインは、地図システム開発ではとても重要な表現となります。ルート案内のラインの時などでも使用しますので、基礎をしっかりと理解しておきましょう。

ご質問などございましたら、お気軽に下記コメント欄にお寄せください。

※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。

Tweet