「GoogleMaps API V3」ポリライン・ポリゴン

「GoogleMaps API V3」の使い方その７（ポリライン・ポリゴン）

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

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

以下の例は、5個の座標を用いてそれぞれ同じ形のポリライン、ポリゴンを表示します。ポリゴンは内部を薄い色で塗りつぶしを行います。

01<head>
02<title>Google Map API v3-7</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05function initialize() {
06    // Google Mapで利用する初期設定用の変数
07    var latlng = new google.maps.LatLng(36.062092, 136.223323);
08    var mapOptions = {
09        zoom: 14,
10        mapTypeId: google.maps.MapTypeId.ROADMAP,
11        center: latlng
12    };
13    // GoogleMapの生成
14    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
15    // ５個の座標(値は特に意味は無い)
16    var latlngData = [
17        { lat:"36.067258", lng:"136.220604" },
18        { lat:"36.065487", lng:"136.230723" },
19        { lat:"36.062456", lng:"136.230704" },
20        { lat:"36.061456", lng:"136.220904" },
21        { lat:"36.063794", lng:"136.210064" }
22    ];
23    // ５個の座標2(値は特に意味は無い)
24    var latlngData2 = [
25        { lat:"36.057258", lng:"136.220604" },
26        { lat:"36.055487", lng:"136.230723" },
27        { lat:"36.052456", lng:"136.230704" },
28        { lat:"36.051456", lng:"136.220904" },
29        { lat:"36.053794", lng:"136.210064" }
30    ];
31    var arrCoords = new Array();
32    for (i = 0;i < latlngData.length;i++) {
33        // 座標地をlatlng値に変換
34        var latlng = new google.maps.LatLng(latlngData[i].lat, latlngData[i].lng);
35        // latlng値を配列に退避
36        arrCoords.push(latlng);
37    }
38    var arrCoords2 = new Array();
39    for (i = 0;i < latlngData2.length;i++) {
40        // 座標地をlatlng値に変換
41        var latlng2 = new google.maps.LatLng(latlngData2[i].lat, latlngData2[i].lng);
42        // latlng値を配列に退避
43        arrCoords2.push(latlng2);
44    }
45    // ポリライン(折れ線)を生成し、マップに表示
46    var poly = new google.maps.Polyline({
47        map: map,              //マップ
48        path: arrCoords,       //ポリラインの座標の列
49        strokeWeight: 5,       //ストローク幅(ピクセル単位)
50        strokeColor: "#f01010",//16進数形式のストロークの色
51        strokeOpacity: 0.5     //ストロークの不透明度(0.0～1.0)
52    });
53    // ポリゴン(多角形)を生成し、マップに表示
54    var poly2 = new google.maps.Polygon({
55        map: map,              //マップ
56        paths: arrCoords2,     //閉ループを示す座標列
57        strokeWeight: 5,       //ストローク幅(ピクセル単位)
58        strokeColor: "#f01010",//ストロークの色(16進数形式)
59        strokeOpacity: 0.5,    //ストロークの不透明度
60        fillColor: "#fc4040",  //塗りつぶしの色(16進数形式)
61        fillOpacity: 0.1       //塗りつぶしの不透明度(0.0～1.0)
62    });
63}
64</script> 
65</head> 
66<body onload="initialize();">
67  <div id="map" style="width: 400px; height: 400px;"></div>
68</body> 
69</html> 

「GoogleMaps API V3」 の使い方その７（ポリライン・ポリゴン）

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

■関連記事

「GoogleMaps API V3」の使い方その７（ポリライン・ポリゴン）