Search

Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!

ポリゴンの各頂点の地理座標を取得

2008/5/5

GPolygon.getVertex(index)

GPolygonクラスのgetVertex()メソッドは、ポリゴンの各頂点の地理座標を返します。 第1引数indexに、地理座標を取得したいポリゴンのインデックス番号を指定します(0始まり)。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
         /* 緯度、経度 */
         var lat=35.665246;
         var lng=139.712319;
         /* 中心地点 */
        map.setCenter(new GLatLng(lat, lng), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* ポリゴン */
        var latOffset = 0.005;
        var lngOffset = 0.005;
        var polygon = new GPolygon([new GLatLng(lat, lng-lngOffset), new GLatLng(lat+latOffset, lng), new GLatLng(lat, lng+lngOffset), new GLatLng(lat-latOffset, lng), new GLatLng(lat, lng-lngOffset)],"#ff0000", 3, 1, "#ff6699", 0.3);
        map.addOverlay(polygon);
        map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */
        
        /* ポリゴンの頂点の数を取得 */
        var s="";
        for(var i=0; i<polygon.getVertexCount(); i++){
            s+="頂点["+i+"] = "+polygon.getVertex(i)+"\n";
        }
        document.getElementById("res").value=s;
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <textarea cols="64" rows="4" id="res" style="width:421px;"></textarea>
</form>

ポリゴンの面積を取得

2008/5/5

GPolygon.getArea()

GPolygonクラスのgetArea()メソッドは、ポリゴンの面積(単位:平方メートル[㎡])を返します。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,polygon;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
         /* 緯度、経度 */
         var lat=35.665246;
         var lng=139.712319;
         /* 中心地点 */
        map.setCenter(new GLatLng(lat, lng), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* ポリゴン */
        var latOffset = 0.005;
        var lngOffset = 0.005;
        polygon = new GPolygon([new GLatLng(lat, lng-lngOffset), new GLatLng(lat+latOffset, lng), new GLatLng(lat, lng+lngOffset), new GLatLng(lat-latOffset, lng), new GLatLng(lat, lng-lngOffset)],"#ff0000", 3, 1, "#ff6699", 0.3);
        map.addOverlay(polygon);
        map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */

        /* ポリゴンの面積を取得 */
        document.getElementById("res").value=polygon.getArea();
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    ポリゴンの面積:<input type="text" id="res" size="20" />&nbsp;㎡
</form>

地図からすべてのポリゴンを削除

2008/5/5

GMap2.clearOverlays()

地図からすべてのポリゴンを削除するには、GMap2クラスのclearOverlays()メソッドを使用します。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
var map, polygon1, polygon2;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
         /* 緯度、経度 */
         var lat1=35.658517;
         var lng1=139.701333;
         var lat2=35.665246;
         var lng2=139.712319;
         /* 中心地点 */
        map.setCenter(new GLatLng(35.662474,139.707556), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* ポリゴン */
        var latOffset = 0.005;
        var lngOffset = 0.005;
        polygon1 = new GPolygon([new GLatLng(lat1, lng1-lngOffset), new GLatLng(lat1+latOffset, lng1), new GLatLng(lat1, lng1+lngOffset), new GLatLng(lat1-latOffset, lng1), new GLatLng(lat1, lng1-lngOffset)], "#ff0000", 3, 1, "#ff6699", 0.3);
        map.addOverlay(polygon1);
        polygon2 = new GPolygon([new GLatLng(lat2, lng2-lngOffset), new GLatLng(lat2+latOffset, lng2), new GLatLng(lat2, lng2+lngOffset), new GLatLng(lat2-latOffset, lng2), new GLatLng(lat2, lng2-lngOffset)], "#ff0000", 3, 1, "#ff6699", 0.3);
        map.addOverlay(polygon2);
        GEvent.addListener(map, "click", function(overlay,latlng) {
            if(overlay) map.removeOverlay(overlay);
        });
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"></div><br>
<form action="#">
    <input type="button" value="すべてのポリゴンを削除" onclick="map.clearOverlays()" />
</form>

地図にポリゴンを表示する

2008/5/5

new GPolygon(points[, strokeColor[, strokeWeight[, strokeOpacity[, fillColor[, fillOpacity[, opts]]]]]])

地図にポリゴンを表示するには、GPolygonクラスを使用します。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
         /* 緯度、経度 */
         var lat=35.665246;
         var lng=139.712319;
         /* 中心地点 */
        map.setCenter(new GLatLng(lat, lng), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* ポリゴン */
        var latOffset = 0.005;
        var lngOffset = 0.005;
        var polygon = new GPolygon([
            new GLatLng(lat, lng-lngOffset),
            new GLatLng(lat+latOffset, lng),
            new GLatLng(lat, lng+lngOffset),
            new GLatLng(lat-latOffset, lng),
            new GLatLng(lat, lng-lngOffset)
        ],
        "#ff0000", /* 枠線の色 */
        3, /* ピクセル単位の線の幅 */
        1, /* 枠線の有無 */
        "#ff6699", /* ポリゴン領域の色 */
        0.3 /* 透明度(0~1の間の数値) */
        );
        map.addOverlay(polygon);
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

ポリゴンのクリックを有効化・無効化

2008/5/5

GPolygonOptionsクラス(clickableプロパティ)

ポリゴンのクリック操作は、デフォルトで有効になっています。

ポリゴンのクリックを無効にする場合は、GPolygonのオプション引数optsのclickableプロパティにFALSEを指定します。 TRUEを指定すると、デフォルト同様、ポリゴンのクリックが有効になります。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
         /* 緯度、経度 */
         var lat=35.665246;
         var lng=139.712319;
         /* 中心地点 */
        map.setCenter(new GLatLng(lat, lng), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* ポリゴン */
        var opts={clickable:false} /* ポリゴンのクリック無効化 */
        var latOffset = 0.005;
        var lngOffset = 0.005;
        var polygon = new GPolygon([new GLatLng(lat, lng-lngOffset), new GLatLng(lat+latOffset, lng), new GLatLng(lat, lng+lngOffset), new GLatLng(lat-latOffset, lng), new GLatLng(lat, lng-lngOffset)],"#ff0000", 3, 1, "#ff6699", 0.3, opts);
        map.addOverlay(polygon);
        map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */

        /* ポリゴンがクリックされた時  */
        GEvent.addListener(polygon, "click", function(latlng){
            alert("ポリゴンがクリックされました");
        });
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<p>
    下記の地図は、ポリゴンのクリックを無効にしています。<br>
    ポリゴンをクリックしても、クリック時に指定した処理が実行されません。
</p>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>

ポリゴンの境界線を取得

2008/5/5

GPolygon.getBounds()

GPolygonクラスのgetBounds()メソッドは、ポリゴンの境界線を返します。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,polygon;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
         /* 緯度、経度 */
         var lat=35.665246;
         var lng=139.712319;
         /* 中心地点 */
        map.setCenter(new GLatLng(lat, lng), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* ポリゴン */
        var latOffset = 0.005;
        var lngOffset = 0.005;
        polygon = new GPolygon([new GLatLng(lat, lng-lngOffset), new GLatLng(lat+latOffset, lng), new GLatLng(lat, lng+lngOffset), new GLatLng(lat-latOffset, lng), new GLatLng(lat, lng-lngOffset)],"#ff0000", 3, 1, "#ff6699", 0.3);
        map.addOverlay(polygon);
        map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */

        /* ポリゴンの境界線を取得 */
        var bounds=polygon.getBounds();
        var s="";
        s+="【ポリゴンの境界線】\n"+bounds+"\n";
        var sw=bounds.getSouthWest();
        var ne=bounds.getNorthEast();
        s+="【南西(左下)】\n緯度:"+sw.lat()+"\n経度:"+sw.lng()+"\n";
        s+="【北東(右上)】\n緯度:"+ne.lat()+"\n経度:"+ne.lng();
        document.getElementById("res").value=s;
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <textarea cols="64" rows="7" id="res" style="width:421px;"></textarea>
</form>

地図から指定したポリゴンを削除

2008/5/5

GMap2.removeOverlay(overlay)

地図から指定したポリゴンを削除するには、GMap2クラスのremoveOverlay()メソッドを使用します。 第1引数overlayに、削除するポリゴンを指定します。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
var map, polygon1, polygon2;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
         /* 緯度、経度 */
         var lat1=35.658517;
         var lng1=139.701333;
         var lat2=35.665246;
         var lng2=139.712319;
         /* 中心地点 */
        map.setCenter(new GLatLng(35.662474,139.707556), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* ポリゴン */
        var latOffset = 0.005;
        var lngOffset = 0.005;
        polygon1 = new GPolygon([new GLatLng(lat1, lng1-lngOffset), new GLatLng(lat1+latOffset, lng1), new GLatLng(lat1, lng1+lngOffset), new GLatLng(lat1-latOffset, lng1), new GLatLng(lat1, lng1-lngOffset)], "#ff0000", 3, 1, "#ff6699", 0.3);
        map.addOverlay(polygon1);
        polygon2 = new GPolygon([new GLatLng(lat2, lng2-lngOffset), new GLatLng(lat2+latOffset, lng2), new GLatLng(lat2, lng2+lngOffset), new GLatLng(lat2-latOffset, lng2), new GLatLng(lat2, lng2-lngOffset)], "#ff0000", 3, 1, "#ff6699", 0.3);
        map.addOverlay(polygon2);
        GEvent.addListener(map, "click", function(overlay,latlng) {
            if(overlay) map.removeOverlay(overlay);
        });
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"></div><br>
<p>↑ ポリゴンをクリックすると、クリックしたポリゴンを削除します。</p>

ポリゴンを削除した時のイベントを取得

2008/5/5

GEvent.addListener(ポリゴンオブジェクト, "remove", function(){処理});

GPolygonクラスのremoveイベントは、GMap2.clearOverlays()メソッドあるいはGMap2.removeOverlay()メソッドで、地図からポリゴンが削除された時に発生します。 イベントハンドラに渡される引数はありません。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map, polygon;
/* ピクセル座標 */
var latlng_1=new GLatLng(35.670284,139.702685); /* 原宿駅 */
var latlng_2=new GLatLng(35.669508,139.70291); /* 神宮橋交差点 */
var latlng_3=new GLatLng(35.669073,139.703994); /* 明治神宮前駅 */
var latlng_4=new GLatLng(35.668467,139.705375); /* 神宮前交差点 */
var latlng_5=new GLatLng(35.665246,139.712319); /* 表参道駅 */
var latlngs=[latlng_1, latlng_2, latlng_3, latlng_4, latlng_5];

function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
         /* 緯度、経度 */
         var lat=35.665246;
         var lng=139.712319;
         /* 中心地点 */
        map.setCenter(new GLatLng(lat, lng), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* ポリゴン */
        var latOffset = 0.005;
        var lngOffset = 0.005;
        polygon = new GPolygon([new GLatLng(lat, lng-lngOffset), new GLatLng(lat+latOffset, lng), new GLatLng(lat, lng+lngOffset), new GLatLng(lat-latOffset, lng), new GLatLng(lat, lng-lngOffset)],"#ff0000", 3, 1, "#ff6699", 0.3);
        map.addOverlay(polygon);

        document.getElementById("res").value="";
        /* ポリゴンが削除された時 */
        GEvent.addListener(polygon, "remove", function(){
            document.getElementById("res").value+="ポリゴンが削除されました\n";
        });
    }
}
function fAddpolygon(polygon){
    map.addOverlay(polygon);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        <input type="button" value="ポリゴン追加" id="swbtn" onclick="fAddpolygon(polygon);" /><br>
        <input type="button" value="ポリゴン削除(clearOverlays)" id="swbtn" onclick="map.clearOverlays();" />
        <input type="button" value="ポリゴン削除(removeOverlay)" id="swbtn" onclick="map.removeOverlay(polygon);" />
    </p>
     <p>
        <textarea cols="64" rows="7" id="res" style="width:421px;"></textarea>
    </p>
</form>

ポリゴンの表示/非表示/非表示判定/表示状態取得

2008/5/5

GPolygon.show()
GPolygon.hide()
GPolygon.isHidden()
GPolygon.supportsHide()
visibilitychangedイベント

GPolygonクラスのshow()メソッドは、ポリゴンを表示します。 戻り値はありません。

GPolygonクラスのhide()メソッドは、ポリゴンを非表示にします。 戻り値はありません。

GPolygonクラスのisHidden()メソッドは、ポリゴンが非表示かどうかを調べ、非表示の場合にTRUE、そうでない場合にFALSEを返します。

GPolygonクラスのsupportsHide()メソッドは、現在の環境でGPolygon.hide()メソッドがサポートされている場合にTRUE、そうでない場合にFALSEを返します。

GPolygonクラスのvisibilitychangedイベントは、ポリゴンの表示状態が「表示→非表示」あるいは「非表示→表示」に変更された時に発生します。 引数にisVisibleをとります。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map, polygon;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
         /* 緯度、経度 */
         var lat=35.665246;
         var lng=139.712319;
         /* 中心地点 */
        map.setCenter(new GLatLng(lat, lng), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* ポリゴン */
        var latOffset = 0.005;
        var lngOffset = 0.005;
        polygon = new GPolygon([new GLatLng(lat, lng-lngOffset), new GLatLng(lat+latOffset, lng), new GLatLng(lat, lng+lngOffset), new GLatLng(lat-latOffset, lng), new GLatLng(lat, lng-lngOffset)],"#ff0000", 3, 1, "#ff6699", 0.3);
        map.addOverlay(polygon);
        map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */

         /* ポリゴンの表示状態が変更された時 */
        document.getElementById("res").value="";
        GEvent.addListener(polygon, "visibilitychanged", function(isVisible){
            if(isVisible==true){
                document.getElementById("res").value+="ポリゴンが表示されました\n";
            }else{
                document.getElementById("res").value+="ポリゴンが非表示になりました\n";
            }
        });
    }
}
function swPolygon(){
    var obj=document.getElementById("swbtn");
    if(polygon.supportsHide()==true){
        if(polygon.isHidden()==true){
            /* 非表示→表示 */
            polygon.show();
            obj.value="ポリゴン非表示";
        }else{
            /* 表示→非表示 */
            polygon.hide();
            obj.value="ポリゴン表示";
        }
    }else{
        document.write("現在の環境では、Gpolygon.hide()メソッドが使えません!");
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        クリックで表示・非表示切替 → <input type="button" value="ポリゴン非表示" id="swbtn" onclick="swPolygon();" />
    </p>
     <p>
        <textarea cols="64" rows="7" id="res" style="width:421px;"></textarea>
    </p>
</form>

ポリゴンの頂点の数を取得

2008/5/5

GPolygon.getVertexCount()

GPolygonクラスのgetVertexCount()メソッドは、ポリゴンの頂点の数を返します。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
         /* 緯度、経度 */
         var lat=35.665246;
         var lng=139.712319;
         /* 中心地点 */
        map.setCenter(new GLatLng(lat, lng), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* ポリゴン */
        var latOffset = 0.005;
        var lngOffset = 0.005;
        var polygon = new GPolygon([new GLatLng(lat, lng-lngOffset), new GLatLng(lat+latOffset, lng), new GLatLng(lat, lng+lngOffset), new GLatLng(lat-latOffset, lng), new GLatLng(lat, lng-lngOffset)],"#ff0000", 3, 1, "#ff6699", 0.3);
        map.addOverlay(polygon);
        map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */
        
        /* ポリゴンの頂点の数を取得 */
        document.getElementById("res").value=polygon.getVertexCount();
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    ポリゴンの頂点の数:<input type="text" id="res" size="3" />
</form>

関連コンテンツ

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

投票する 投票結果を見る

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

pagetop