スキップしてメイン コンテンツに移動

【Maps JavaScript API】マップに図形(ポリゴン)を追加してみよう

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


地図上に任意の数だけ指定した位置座標を結んで出来る多角形を追加するには、このポリゴンを使用していきます。
Polygonクラスは、ポリゴンを表示するためのクラスです。
LatLng 位置の配列の順序で図形を作成するのでPolyline オブジェクトにとても似ています。
また、Polygon コンストラクタでは、図形の LatLng 座標や、ラインや領域の色や太さなどのスタイルを指定します。
作成時に指定したプロパティは、構成後に変更することが可能です。

今回はとてもシンプルな図形の追加方法を解説していますが、複雑な図形も描画することができます。その追加方法については、今後解説していきたいと思います。
それでは、Polygon options オブジェクで、ポリゴンの線の色、太さ、透明度、領域のカラーなどを指定する方法を見てみましょう。
 //Polygon コンストラクタにて座標とスタイルを指定
 var bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords, //ポリゴンの配列
  strokeColor: '#FF0000', //ライン色(#RRGGBB形式)
  strokeOpacity: 0.8, //ライン透明度 0.0~1.0(デフォルト)
  strokeWeight: 2, //ライン太さ(単位ピクセル)
  fillColor: '#FF0000', //ポリゴン領域色(#RRGGBB形式)
  fillOpacity: 0.35 //ポリゴン領域透明度 0.0~1.0(デフォルト)
 });

ポリゴンのプロパティ

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

ポリゴンを追加する

次の例は、4点の座標を繋ぐポリゴンを地図上に追加しています。
単純な配列を paths プロパティに格納する際、座標を配列の配列として指定します。各配列のタイプは MVCArray です。 (MVCArrayとは、APIが提供する google.maps.MVCArray() 。この配列は、forEach(callback:function(element,index))の形で一括処理が出来るのでとても便利です。この活用法については、今後解説していきたいと思います。)
図形の始点と終点の座標は同じになるので、終点の座標を省略しても問題ありません。
自動的に終点の座標が補完されます。
ソースをそのまま使用しても表示できますので、まずはコピーしてポリゴンを追加してみましょう。
<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 triangleCoords = [
  {lat: 35.681167, lng: 139.767052},
  {lat: 35.671167, lng: 139.77052},
  {lat: 35.661167, lng: 139.787052},
  {lat: 35.651167, lng: 139.697052}
 ];

 //Polygon コンストラクタにて座標とスタイルを指定
 var bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,  //ポリゴンの配列
  strokeColor: '#FF0000',  //ライン色(#RRGGBB形式)
  strokeOpacity: 0.8,  //ライン透明度 0.0~1.0(デフォルト)
  strokeWeight: 2, //ライン太さ(単位ピクセル)
  fillColor: '#FF0000', //ポリゴン領域色(#RRGGBB形式)
  fillOpacity: 0.35 //ポリゴン領域透明度 0.0~1.0(デフォルト)
 });
 //Polygon をマップにセット
 bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

サンプルページはこちら
以上でマップにポリゴンを追加する方法の解説を終わります。
単純なポリゴンは、座標とスタイルを指定することで簡単に追加することができます。
このポリゴンが、地図システム開発でどのように活用できるかについては、今後解説を予定している「Google Maps APIを使った地図システムの活用方法」にてご紹介していきたいと思います。
まずは基本の描画方法をしっかりと理解しましょう。

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

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