Google Maps JavaScript API v3ポリゴン(図形の描画)
ポリゴン(地図上に多角形を描画)
2011/6/26
ポリゴンは、地図上に各座標をつなぐ図形を描画します。
オプションで、ストローク(図形の枠線)の色・太さ・透明度、フィル(図形の内側)の色・透明度などをカスタマイズできます。 色は#RRGGBB形式で指定します。
図形の始点と終点の座標は同じになりますので、終点の座標を省略してもOK。 自動的に終点の座標が補完されます。
構文
/* ポリゴンオブジェクト */ var bermudaTriangle; /* ポリゴンを描画する図形の各頂点の緯度・経度を配列で指定 */ var triangleCoords = [ new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737), new google.maps.LatLng(25.774252, -80.190262) /* 終点は省略可 */ ]; /* ポリゴン生成 */ bermudaTriangle = new google.maps.Polygon({ /* ポリゴンのオプション設定 */ paths: triangleCoords, /* パス配列 */ strokeColor: '#FF0000', /* ストロークの色 */ strokeOpacity: 0.8, /* ストロークの透明度 */ strokeWeight: 2, /* ストロークの幅 */ fillColor: '#FF0000', /* フィルの色 */ fillOpacity: 0.35 /* フィルの透明度 */ }); /* ポリゴンを地図に追加 */ bermudaTriangle.setMap(map);
設置サンプル
下記のサンプルでは、魔の三角地帯といわれるバミューダトライアングル(フロリダ半島の先端、プエルトリコ、バミューダ諸島を結んだ三角形の海域)をポリゴンで描画します。



設置サンプルサンプルを見る
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); /* 地図の初期化 */ function initialize() { /* 地図のオプション設定 */ var myOptions={ /*初期のズーム レベル */ zoom: 4, /* 地図の中心点 */ center: new google.maps.LatLng(24.886436490787712, -70.2685546875), /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.HYBRID }; /* 地図オブジェクト */ var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★ポリゴン */ /* ポリゴンオブジェクト */ var bermudaTriangle; /* ポリゴンを描画する図形の各頂点の緯度・経度を配列で指定 */ var triangleCoords = [ new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737), new google.maps.LatLng(25.774252, -80.190262) ]; /* ポリゴン生成 */ bermudaTriangle = new google.maps.Polygon({ /* ポリゴンのオプション設定 */ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map: map, }); /* ポリゴンを地図に追加 */ //bermudaTriangle.setMap(map); } </script> </head> <body> <h3>ポリライン</h3> <p>魔の三角地帯といわれるバミューダトライアングル(フロリダ半島の先端、プエルトリコ、バミューダ諸島を結んだ三角形の海域)をポリゴンで描画します。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
下記のサンプルでは、ポリゴンをクリックすると情報ウィンドウを表示します。



設置サンプルサンプルを見る
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); /* 地図オブジェクト */ var map; /* 情報ウィンドウオブジェクト */ var infoWindow; /* 地図の初期化 */ function initialize() { /* 地図のオプション設定 */ var myOptions={ /*初期のズーム レベル */ zoom: 4, /* 地図の中心点 */ center: new google.maps.LatLng(24.886436490787712, -70.2685546875), /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.HYBRID }; /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★ポリゴン */ /* ポリゴンオブジェクト */ var bermudaTriangle; /* ポリゴンを描画する図形の緯度・経度 */ var triangleCoords=[ new google.maps.LatLng(25.774252, -80.190262), /* マイアミ */ new google.maps.LatLng(18.466465, -66.118292), /* プエルトリコ */ new google.maps.LatLng(32.321384, -64.75737), /* バミューダ諸島 */ /* 頂点と同じなので省略化 */ //new google.maps.LatLng(25.774252, -80.190262) /* マイアミ */ ]; /* ポリゴン生成 */ bermudaTriangle=new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 }); /* ポリゴンを地図に追加 */ bermudaTriangle.setMap(map); /* ポリゴンがクリックされた時に情報ウィンドウ表示 */ google.maps.event.addListener(bermudaTriangle, 'click', showArrays); infowindow=new google.maps.InfoWindow(); } function showArrays(event){ /* 頂点のパス */ var vertices=this.getPath(); var s=""; s+="<b>バミューダトライアングル・ポリゴン</b><br><br>"+"▼クリックした場所の座標<br>"+event.latLng.lat()+", "+event.latLng.lng() + "<br>"; /* ポリゴンを形成している各頂点の座標を取得(triangleCoordsで指定した値) */ for (var i=0; i < vertices.length; i++) { var xy=vertices.getAt(i); s+="<br>座標: "+i+"<br>"+xy.lat()+", "+xy.lng(); } infowindow.setContent(s); infowindow.setPosition(event.latLng); infowindow.open(map); } </script> </head> <body> <h3>ポリライン</h3> <p>魔の三角地帯といわれるバミューダトライアングル(フロリダ半島の先端、プエルトリコ、バミューダ諸島を結んだ三角形の海域)をポリゴンで描画します。ポリゴンをクリックすると情報ウィンドウを表示します。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
地図上に「円」を描画
2011/6/26
ポリゴンでは、円を描画することができます。
オプションで、ストローク(円の枠線)の色・太さ・透明度、フィル(円の内側)の色・透明度などをカスタマイズできます。 色は#RRGGBB形式で指定します。
円の形状は、ポリゴンと異なり、下記2つのプロパティで定義します。
- 「center」プロパティ 円の中心地点のlatLng値を指定。
- 「radius」プロパティ 円の半径をメートル単位で指定。
構文
/* オプション設定 */ var populationOptions={ strokeColor: '#FF0000', /* ストロークの色 */ strokeOpacity: 0.8, /* ストロークの透明度 */ strokeWeight: 2, /* ストロークの幅 */ fillColor: '#FF0000', /* フィルの色 */ fillOpacity: 0.35, /* フィルの透明度 */ map: map, /* 図形を追加する地図オブジェクト */ center: new google.maps.LatLng(35.69384010,139.70354940), /* 円の中心地点 */ radius: 12126 /* 円の大きさ */ }; /* 円オブジェクト生成 */ var cityCircle=new google.maps.Circle(populationOptions);
設置サンプル
下記のサンプルでは、関東地方の県庁所在地に円を描画します。 円をクリックすると、県庁所在地の住所と緯度・経度を情報ウィンドウで表示します。



設置サンプルサンプルを見る
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var cityCircle, map,infowindow; var shinjyuku=new google.maps.LatLng(35.69384010,139.70354940); var citymap={ "tokyo":{ /* 東京都新宿区 */ center:shinjyuku, population: 242518 }, "kanagawa":{ /* 神奈川県横浜市(神奈川県横浜市中区日本大通1) */ center: new google.maps.LatLng(35.44750459999999,139.64234730), population: 242518 }, "chiba":{ /* 千葉県千葉市(千葉県千葉市中央区市場町1-1) */ center: new google.maps.LatLng(35.6046020,140.12312310), population: 242518 }, "saitama":{ /* 埼玉県さいたま市(埼玉県さいたま市浦和区高砂3-15-1) */ center: new google.maps.LatLng(35.85743240,139.64909590), population: 242518 }, "gunma":{ /* 群馬県前橋市(群馬県前橋市大手町1-1-1) */ center: new google.maps.LatLng(36.39125080,139.06084770), population: 242518 }, "tochigi":{ /* 栃木県宇都宮市 */ center: new google.maps.LatLng(36.55511240, 139.88280720), population: 242518 }, "ibaragi":{ /* 茨城県水戸市(茨城県水戸市笠原町978番6) */ center: new google.maps.LatLng(36.36585560, 140.47122150), population: 242518 } } /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); /* 地図の初期化 */ function initialize() { /* ジオコードオブジェクト */ geocoder = new google.maps.Geocoder(); /* 地図のオプション設定 */ var myOptions={ zoom: 8, /* 地図の中心点 */ center: shinjyuku, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.TERRAIN }; /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★円 */ for (var city in citymap) { var populationOptions={ strokeColor: "#ffffff", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#ff6699", fillOpacity: 0.35, map: map, /* 円の中心地点 */ center: citymap[city].center, /* 円の大きさ */ radius: citymap[city].population / 20 }; cityCircle=new google.maps.Circle(populationOptions); google.maps.event.addListener(cityCircle, 'click', showArrays); } /* 情報ウィンドウ */ infowindow=new google.maps.InfoWindow(); } /* 円をクリックした時に、情報ウィンドウを表示 */ function showArrays(event){ var vertices=this.getCenter(); geocoder.geocode({'latLng': vertices, 'language': 'ja'}, function(results, status) { if(status==google.maps.GeocoderStatus.OK){ var s=""; s+="◆県庁所在地<br>住所<br>"+results[0].formatted_address+"<br>座標<br>"+vertices.lat()+", "+vertices.lng() + ""; infowindow.setContent(s); infowindow.setPosition(vertices); infowindow.open(map); } }); } </script> </head> <body> <h3>ポリゴン - 円</h3> <p> 関東地方の県庁所在地に円を描画します。円をクリックすると、県庁所在地の住所と緯度・経度を情報ウィンドウで表示します。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
地図上に「長方形」を描画
2011/6/26
ポリゴンでは、長方形を描画することができます。
オプションで、ストローク(長方形の枠線)の色・太さ・透明度、フィル(長方形の内側)の色・透明度などをカスタマイズできます。 色は#RRGGBB形式で指定します。
長方形の形状は、ポリゴンと異なり、下記のプロパティで定義します。
- 「bounds」プロパティ 長方形の南西と北東の位置を、LatLngBounds値で指定。
構文
/* 長方形の南西と北東の位置を、LatLngBounds値 */ var ne = new google.maps.LatLng(45.66910470,149.1209620); var sw = new google.maps.LatLng(23.92079720, 122.910); var bounds = new google.maps.LatLngBounds(sw,ne); /* オプション設定 */ var rectOptions={ strokeColor: '#FF0000', /* ストロークの色 */ strokeOpacity: 0.8, /* ストロークの透明度 */ strokeWeight: 2, /* ストロークの幅 */ fillColor: '#FF0000', /* フィルの色 */ fillOpacity: 0.35, /* フィルの透明度 */ map: map, /* 図形を追加する地図オブジェクト */ bounds:bounds /* 長方形の南西と北東の位置 */ } /* 長方形オブジェクト生成 */ var rectangle = new google.maps.Rectangle(rectOptions);
設置サンプル
下記のサンプルでは、日本の上に長方形を描画します。 長方形をクリックすると、現在のビューポートの緯度・経度の範囲をアラート表示します。



設置サンプルサンプルを見る
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var rectangle, map; /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); /* 地図の初期化 */ function initialize() { /* ジオコードオブジェクト */ geocoder = new google.maps.Geocoder(); /* 地図のオプション設定 */ var myOptions={ /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.TERRAIN }; /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); var ne = new google.maps.LatLng(45.66910470,149.1209620); var sw = new google.maps.LatLng(23.92079720, 122.910); var bounds = new google.maps.LatLngBounds(sw,ne); /* 日本にフィット */ map.fitBounds(bounds); /* ★レクタングル */ var rectOptions={ strokeColor: "#ffffff", /* ストロークの色 */ strokeOpacity: 0.8, /* ストロークの透明度 */ strokeWeight: 2, /* ストロークの幅 */ fillColor: "#ff6699", /* フィルの色 */ fillOpacity: 0.35, /* フィルの透明度 */ map: map, /* 図形を追加する地図オブジェクト */ bounds:bounds /* 長方形の南西と北東の位置 */ } rectangle = new google.maps.Rectangle(rectOptions); google.maps.event.addListener(rectangle, 'click', show); } /* 長方形をクリックした時に、現在のビューポートの緯度・経度の範囲をアラート表示 */ function show(event){ alert(this.getBounds()) } </script> </head> <body> <h3>ポリゴン - 長方形</h3> <p>日本の上に長方形を描画します。長方形をクリックすると、現在のビューポートの緯度・経度の範囲をアラート表示します。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>