おやじプログラマー日記 : 「GoogleMap API V3」の使い方その７（ポリライン・ポリゴン）

■マップ上にポリライン・ポリゴンを表示

マップ上にポリライン（折れ線）及び、ポリゴン（多角形）を表示します。
ポリラインを表示するにはPolylineクラスを生成し、それをマップ上に設定します。また、ポリゴンを表示するにはPolygonクラスを生成し、それをマップ上に設定します。

以下の例は、5個の座標を用いてそれぞれ同じ形のポリライン、ポリゴンを表示します。ポリゴンは内部を薄い色で塗りつぶしを行います。 <head> <title>Google Map API v3-7</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=(取得したkeyコード)" charset="utf-8"></script> <script type="text/javascript"> function initialize() { // Google Mapで利用する初期設定用の変数 var latlng = new google.maps.LatLng(36.062092, 136.223323); var mapOptions = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; // GoogleMapの生成 var map = new google.maps.Map(document.getElementById("map"), mapOptions); // ５個の座標(値は特に意味は無い) var latlngData = [ { lat:"36.067258", lng:"136.220604" }, { lat:"36.065487", lng:"136.230723" }, { lat:"36.062456", lng:"136.230704" }, { lat:"36.061456", lng:"136.220904" }, { lat:"36.063794", lng:"136.210064" } ]; // ５個の座標2(値は特に意味は無い) var latlngData2 = [ { lat:"36.057258", lng:"136.220604" }, { lat:"36.055487", lng:"136.230723" }, { lat:"36.052456", lng:"136.230704" }, { lat:"36.051456", lng:"136.220904" }, { lat:"36.053794", lng:"136.210064" } ]; var arrCoords = new Array(); for (i = 0;i < latlngData.length;i++) { // 座標地をlatlng値に変換 var latlng = new google.maps.LatLng(latlngData[i].lat, latlngData[i].lng); // latlng値を配列に退避 arrCoords.push(latlng); } var arrCoords2 = new Array(); for (i = 0;i < latlngData2.length;i++) { // 座標地をlatlng値に変換 var latlng2 = new google.maps.LatLng(latlngData2[i].lat, latlngData2[i].lng); // latlng値を配列に退避 arrCoords2.push(latlng2); } // ポリライン(折れ線)を生成し、マップに表示 var poly = new google.maps.Polyline({ map: map, //マップ path: arrCoords, //ポリラインの座標の列 strokeWeight: 5, //ストローク幅(ピクセル単位) strokeColor: "#f01010",//16進数形式のストロークの色 strokeOpacity: 0.5 //ストロークの不透明度(0.0～1.0) }); // ポリゴン(多角形)を生成し、マップに表示 var poly2 = new google.maps.Polygon({ map: map, //マップ paths: arrCoords2, //閉ループを示す座標列 strokeWeight: 5, //ストローク幅(ピクセル単位) strokeColor: "#f01010",//ストロークの色(16進数形式) strokeOpacity: 0.5, //ストロークの不透明度 fillColor: "#fc4040", //塗りつぶしの色(16進数形式) fillOpacity: 0.1 //塗りつぶしの不透明度(0.0～1.0) }); } </script> </head> <body onload="initialize();"> <div id="map" style="width: 400px; height: 400px;"></div> </body> </html>