Google Maps JavaScript API v2Google Maps APIの使い方 - ポリゴン
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
ポリゴンの各頂点の地理座標を取得
2008/5/5
GPolygonクラスのgetVertex()メソッドは、ポリゴンの各頂点の地理座標を返します。 第1引数indexに、地理座標を取得したいポリゴンのインデックス番号を指定します(0始まり)。

<script src="http://maps.google.com/maps?file=api&v=2&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()メソッドは、ポリゴンの面積(単位:平方メートル[㎡])を返します。

<script src="http://maps.google.com/maps?file=api&v=2&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" /> ㎡ </form>
地図からすべてのポリゴンを削除
2008/5/5
地図からすべてのポリゴンを削除するには、GMap2クラスのclearOverlays()メソッドを使用します。

<script src="http://maps.google.com/maps?file=api&v=2&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
地図にポリゴンを表示するには、GPolygonクラスを使用します。

<script src="http://maps.google.com/maps?file=api&v=2&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
ポリゴンのクリック操作は、デフォルトで有効になっています。
ポリゴンのクリックを無効にする場合は、GPolygonのオプション引数optsのclickableプロパティにFALSEを指定します。 TRUEを指定すると、デフォルト同様、ポリゴンのクリックが有効になります。

<script src="http://maps.google.com/maps?file=api&v=2&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()メソッドは、ポリゴンの境界線を返します。

<script src="http://maps.google.com/maps?file=api&v=2&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()メソッドを使用します。 第1引数overlayに、削除するポリゴンを指定します。

<script src="http://maps.google.com/maps?file=api&v=2&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
GPolygonクラスのremoveイベントは、GMap2.clearOverlays()メソッドあるいはGMap2.removeOverlay()メソッドで、地図からポリゴンが削除された時に発生します。 イベントハンドラに渡される引数はありません。

<script src="http://maps.google.com/maps?file=api&v=2&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.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&v=2&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()メソッドは、ポリゴンの頂点の数を返します。

<script src="http://maps.google.com/maps?file=api&v=2&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>