「GoogleMaps API V3」 の使い方その7(ポリライン・ポリゴン)


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

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

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

<head>
<title>Google Map API v3-7</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" 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);
    // 5個の座標(値は特に意味は無い)
    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" }
    ];
    // 5個の座標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> 

■関連記事
「GoogleMaps API V3」の使い方その1
「GoogleMaps API V3」の使い方その2
「GoogleMaps API V3」の使い方その3(マーカーの表示)
「GoogleMaps API V3」の使い方その4(イベント)
「GoogleMaps API V3」の使い方その5(続イベント)
「GoogleMaps API V3」の使い方その6(続々イベント)
「GoogleMaps API V3」の使い方その8(ジオコーディング)
「GoogleMaps API V3」の使い方その9(ルート検索)
「GoogleMaps API V3」の使い方その10(ルート検索2)
「GoogleMaps API V3」の使い方その11(さらにInfowindow)

ページのトップへ戻る