ポリゴン

ポリゴンの表示

ポリゴンは、各頂点によって形成された多角形の領域を塗りつぶします。

//ポリゴンオブジェクト
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);

ポリゴンの配列

ポリゴンは、一連の座標を配列の配列として指定します。各配列のタイプは MVCArray です。「リーフ」の配列は LatLng 座標の配列で、1 つのパスを示します。これらの座標を取得するには、Polygon の getPaths() methodを呼び出します。配列は MVCArray であるため、次のオペレーションを使って操作と確認を行う必要があります:

・getAt() は指定されたゼロベースのインデックス値に LatLng を返します。

・insertAt() は指定されたゼロベースのインデックス値に渡された LatLng を挿入します。該当するインデックス値に存在していた座標は、順送りにされます。

・removeAt() は指定されたゼロベースのインデックス値の LatLng を削除します。

サンプルコード

サンプル.js 次のコードスニペットでは、コードスニペットでは、バミューダ海域を示すポリゴンを作成します

function initialize() {
var myLatLng = new google.maps.LatLng
 (24.886436490787712, -70.2685546875);var myOptions = {
  zoom: 4,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.TERRAIN
};

var bermudaTriangle;

var map = new google.maps.Map
 (document.getElementById("map_canvas"),
    myOptions);

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)
];

// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35
});

bermudaTriangle.setMap(map);
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API ポリゴンの表示</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>ポリゴンの表示</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>

表示例ポリゴンの表示

地図サンプルイメージ
ポリゴンの表示

サンプルイメージ地図は地理院タイル（標高タイル）を加工して作成

Google Maps サンプル　>　ポリゴンの表示

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

ポリゴン

ポリゴンの表示

サンプルコード

カテゴリー