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

「GoogleMaps 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=MyKeyCode" 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>

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

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

■関連記事

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