• 小
  • 中
  • 大

ポリゴンの表示

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

//ポリゴンオブジェクト
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 次のコード スニペットでは、コード スニペットでは、バミューダ海域を示すポリゴンを作成します
参照先は:Googleコード>Google Maps JavaScript API V3 オーバーレイ>ポリゴン


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 "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


表示例 ポリゴンの表示


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