ポリゴン（図形の描画）｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room

Google Maps JavaScript API v3ポリゴン（図形の描画）


Google Maps JavaScript API V3

ポリゴン（地図上に多角形を描画）

2011/6/26

ポリゴンは、地図上に各座標をつなぐ図形を描画します。

オプションで、ストローク（図形の枠線）の色・太さ・透明度、フィル（図形の内側）の色・透明度などをカスタマイズできます。 色は#RRGGBB形式で指定します。

図形の始点と終点の座標は同じになりますので、終点の座標を省略してもOK。 自動的に終点の座標が補完されます。

構文

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

設置サンプル

下記のサンプルでは、魔の三角地帯といわれるバミューダトライアングル（フロリダ半島の先端、プエルトリコ、バミューダ諸島を結んだ三角形の海域）をポリゴンで描画します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        /* 地図の初期化 */
        function initialize() {
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 4,
                /* 地図の中心点 */
                center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.HYBRID
            };
            /* 地図オブジェクト */
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* ★ポリゴン */
            /* ポリゴンオブジェクト */
            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,
                map: map,
            });
            /* ポリゴンを地図に追加 */
            //bermudaTriangle.setMap(map);
        }
    </script>
</head>
<body>
    <h3>ポリライン</h3>
    <p>魔の三角地帯といわれるバミューダトライアングル（フロリダ半島の先端、プエルトリコ、バミューダ諸島を結んだ三角形の海域）をポリゴンで描画します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

下記のサンプルでは、ポリゴンをクリックすると情報ウィンドウを表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        /* 地図オブジェクト */
        var map;
        /* 情報ウィンドウオブジェクト */
        var infoWindow;
        
        /* 地図の初期化 */
        function initialize() {
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 4,
                /* 地図の中心点 */
                center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.HYBRID
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* ★ポリゴン */
            /* ポリゴンオブジェクト */
            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);
            
            /* ポリゴンがクリックされた時に情報ウィンドウ表示 */
            google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
            infowindow=new google.maps.InfoWindow();
        }
        function showArrays(event){
            /* 頂点のパス */
            var vertices=this.getPath();
            var s="";
            s+="<b>バミューダトライアングル・ポリゴン</b><br><br>"+"▼クリックした場所の座標<br>"+event.latLng.lat()+", "+event.latLng.lng() + "<br>";
            /* ポリゴンを形成している各頂点の座標を取得（triangleCoordsで指定した値） */
            for (var i=0; i < vertices.length; i++) {
                var xy=vertices.getAt(i);
                s+="<br>座標: "+i+"<br>"+xy.lat()+", "+xy.lng();
            }
            infowindow.setContent(s);
            infowindow.setPosition(event.latLng);
            infowindow.open(map);
        }
    </script>
</head>
<body>
    <h3>ポリライン</h3>
    <p>魔の三角地帯といわれるバミューダトライアングル（フロリダ半島の先端、プエルトリコ、バミューダ諸島を結んだ三角形の海域）をポリゴンで描画します。ポリゴンをクリックすると情報ウィンドウを表示します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

地図上に「円」を描画

2011/6/26

ポリゴンでは、円を描画することができます。

オプションで、ストローク（円の枠線）の色・太さ・透明度、フィル（円の内側）の色・透明度などをカスタマイズできます。 色は#RRGGBB形式で指定します。

円の形状は、ポリゴンと異なり、下記2つのプロパティで定義します。

  • 「center」プロパティ　円の中心地点のlatLng値を指定。
  • 「radius」プロパティ　円の半径をメートル単位で指定。

構文

/* オプション設定 */
var populationOptions={
    strokeColor: '#FF0000', /* ストロークの色 */
    strokeOpacity: 0.8, /* ストロークの透明度 */
    strokeWeight: 2, /* ストロークの幅 */
    fillColor: '#FF0000', /* フィルの色 */
    fillOpacity: 0.35, /* フィルの透明度 */
    map: map, /* 図形を追加する地図オブジェクト */
    center: new google.maps.LatLng(35.69384010,139.70354940),	/* 円の中心地点 */
    radius: 12126	/* 円の大きさ */
};
/* 円オブジェクト生成 */
var cityCircle=new google.maps.Circle(populationOptions);

設置サンプル

下記のサンプルでは、関東地方の県庁所在地に円を描画します。 円をクリックすると、県庁所在地の住所と緯度・経度を情報ウィンドウで表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var cityCircle, map,infowindow;
        var shinjyuku=new google.maps.LatLng(35.69384010,139.70354940);
        var citymap={
            "tokyo":{ /* 東京都新宿区 */
                center:shinjyuku,
                population: 242518
            },
            "kanagawa":{ /* 神奈川県横浜市(神奈川県横浜市中区日本大通1) */
                center: new google.maps.LatLng(35.44750459999999,139.64234730),
                population: 242518
            },
            "chiba":{ /* 千葉県千葉市(千葉県千葉市中央区市場町1-1)  */
                center: new google.maps.LatLng(35.6046020,140.12312310),
                population: 242518
            },
            "saitama":{ /* 埼玉県さいたま市(埼玉県さいたま市浦和区高砂3-15-1) */
                center: new google.maps.LatLng(35.85743240,139.64909590),
                population: 242518
            },
            "gunma":{ /* 群馬県前橋市(群馬県前橋市大手町1-1-1) */
                center: new google.maps.LatLng(36.39125080,139.06084770),
                population: 242518
            },
            "tochigi":{ /* 栃木県宇都宮市 */
                center: new google.maps.LatLng(36.55511240, 139.88280720),
                population: 242518
            },
            "ibaragi":{ /* 茨城県水戸市(茨城県水戸市笠原町978番6) */
                center: new google.maps.LatLng(36.36585560, 140.47122150),
                population: 242518
            }
        }
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        /* 地図の初期化 */
        function initialize() {
            /* ジオコードオブジェクト */
            geocoder = new google.maps.Geocoder();
            /* 地図のオプション設定 */
            var myOptions={
                 zoom: 8,
                /* 地図の中心点 */
                center: shinjyuku,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* ★円 */
            for (var city in citymap) {
                var populationOptions={
                    strokeColor: "#ffffff",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#ff6699",
                    fillOpacity: 0.35,
                    map: map,
                    /* 円の中心地点 */
                    center: citymap[city].center,
                    /* 円の大きさ */
                    radius: citymap[city].population / 20
                };
                cityCircle=new google.maps.Circle(populationOptions);
                 google.maps.event.addListener(cityCircle, 'click', showArrays);
            }
            /* 情報ウィンドウ */
            infowindow=new google.maps.InfoWindow();
        }
        /* 円をクリックした時に、情報ウィンドウを表示 */
        function showArrays(event){
            var vertices=this.getCenter();
             geocoder.geocode({'latLng': vertices, 'language': 'ja'}, function(results, status) {
                if(status==google.maps.GeocoderStatus.OK){
                    var s="";
                    s+="◆県庁所在地<br>住所<br>"+results[0].formatted_address+"<br>座標<br>"+vertices.lat()+", "+vertices.lng() + "";
                    infowindow.setContent(s);
                    infowindow.setPosition(vertices);
                    infowindow.open(map);
                }
            });
        }
    </script>
</head>
<body>
    <h3>ポリゴン - 円</h3>
    <p>    関東地方の県庁所在地に円を描画します。円をクリックすると、県庁所在地の住所と緯度・経度を情報ウィンドウで表示します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

地図上に「長方形」を描画

2011/6/26

ポリゴンでは、長方形を描画することができます。

オプションで、ストローク（長方形の枠線）の色・太さ・透明度、フィル（長方形の内側）の色・透明度などをカスタマイズできます。 色は#RRGGBB形式で指定します。

長方形の形状は、ポリゴンと異なり、下記のプロパティで定義します。

  • 「bounds」プロパティ　長方形の南西と北東の位置を、LatLngBounds値で指定。

構文

/* 長方形の南西と北東の位置を、LatLngBounds値 */
var ne = new google.maps.LatLng(45.66910470,149.1209620);
var sw = new google.maps.LatLng(23.92079720, 122.910);
var bounds = new google.maps.LatLngBounds(sw,ne);
/* オプション設定 */
var rectOptions={
    strokeColor: '#FF0000', /* ストロークの色 */
    strokeOpacity: 0.8, /* ストロークの透明度 */
    strokeWeight: 2, /* ストロークの幅 */
    fillColor: '#FF0000', /* フィルの色 */
    fillOpacity: 0.35, /* フィルの透明度 */
    map: map, /* 図形を追加する地図オブジェクト */
    bounds:bounds /* 長方形の南西と北東の位置 */
}
/* 長方形オブジェクト生成 */
var rectangle = new google.maps.Rectangle(rectOptions);

設置サンプル

下記のサンプルでは、日本の上に長方形を描画します。 長方形をクリックすると、現在のビューポートの緯度・経度の範囲をアラート表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var rectangle, map;
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        /* 地図の初期化 */
        function initialize() {
            /* ジオコードオブジェクト */
            geocoder = new google.maps.Geocoder();
            /* 地図のオプション設定 */
            var myOptions={
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var ne = new google.maps.LatLng(45.66910470,149.1209620);
            var sw = new google.maps.LatLng(23.92079720, 122.910);
            var bounds = new google.maps.LatLngBounds(sw,ne);
            /* 日本にフィット */
            map.fitBounds(bounds);
            /* ★レクタングル */
            var rectOptions={
                strokeColor: "#ffffff",    /* ストロークの色 */
                strokeOpacity: 0.8,        /* ストロークの透明度 */
                strokeWeight: 2,        /* ストロークの幅 */
                fillColor: "#ff6699",    /* フィルの色 */
                fillOpacity: 0.35,        /* フィルの透明度 */
                map: map,                /* 図形を追加する地図オブジェクト */
                bounds:bounds            /* 長方形の南西と北東の位置 */
            }
            rectangle = new google.maps.Rectangle(rectOptions);
            google.maps.event.addListener(rectangle, 'click', show);
        }
        /* 長方形をクリックした時に、現在のビューポートの緯度・経度の範囲をアラート表示 */
        function show(event){
            alert(this.getBounds())
        }
    </script>
</head>
<body>
    <h3>ポリゴン - 長方形</h3>
    <p>日本の上に長方形を描画します。長方形をクリックすると、現在のビューポートの緯度・経度の範囲をアラート表示します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて

©2026 PHP & JavaScript Room All Rights Reserved.