Google Maps JavaScript API v2Google Maps APIの使い方 - ライン(線分)
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
ラインの境界線を取得
2008/5/5
GPolylineクラスの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,marker; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* ピクセル座標 */ 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 ]; var polyline=new GPolyline(latlngs, "#008800", 3, 0.5); map.addOverlay(polyline); /* 中心地点 */ map.setCenter(new GLatLng(35.667216,139.708951), 15); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* 大きなコントロール */ map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */ /* マーカー追加 */ map.addOverlay(new GMarker(latlng_1)); map.addOverlay(new GMarker(latlng_5)); /* ラインの境界線を取得 */ var bounds=polyline.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> <p>【原宿駅~表参道】</p> <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
GPolylineクラスの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[ var map,marker; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* ピクセル座標 */ 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 ]; var polyline=new GPolyline(latlngs, "#008800", 3, 0.5); map.addOverlay(polyline); /* 中心地点 */ map.setCenter(new GLatLng(35.667216,139.708951), 15); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* 大きなコントロール */ map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */ /* マーカー追加 */ map.addOverlay(new GMarker(latlng_1)); map.addOverlay(new GMarker(latlng_5)); /* ラインの頂点の数を取得 */ var s=""; for(var i=0; i<polyline.getVertexCount(); i++){ s+="頂点["+i+"] = "+polyline.getVertex(i)+"\n"; } document.getElementById("res").value=s; } } window.onload=load; window.unload=GUnload; //]]> </script> <p>【原宿駅~表参道】</p> <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
GPolylineクラスの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[ var map,marker; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* ピクセル座標 */ 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 ]; var polyline=new GPolyline(latlngs, "#008800", 3, 0.5); map.addOverlay(polyline); /* 中心地点 */ map.setCenter(new GLatLng(35.667216,139.708951), 15); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* 大きなコントロール */ map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */ /* マーカー追加 */ map.addOverlay(new GMarker(latlng_1)); map.addOverlay(new GMarker(latlng_5)); /* ラインの頂点の数を取得 */ document.getElementById("res").value=polyline.getVertexCount(); } } window.onload=load; window.unload=GUnload; //]]> </script> <p>【原宿駅~表参道】</p> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br> <form action="#"> ラインの頂点の数:<input type="text" id="res" size="3" /> </form>
地図にライン(線分)を表示する
2008/5/5
地図にライン(線分)を表示するには、GPolylineクラスを使用します。
第1引数latlngsには、頂点の地理座標を格納した配列を指定します。
オプションの第2引数colorには、ラインの色を#RRGGGBB形式で指定します。
オプションの第3引数weightには、ラインの太さ(単位:ピクセル)を指定します。
オプションの第4引数opacityには、ラインの透明度を0~1の数値で指定します。
オプションの第5引数optsには、ラインのラインのオプション設定(GPolylineOptionsクラス)を指定します。
日本からラスベガスまでの航路

<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,marker; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* 地理座標 */ var latlng_1=new GLatLng(35.675147,139.702148); /* 東京都 */ var latlng_2=new GLatLng(34.159545,-118.24585); /* ロサンゼルス */ var latlng_3=new GLatLng(36.224334,-115.139465); /* ラズベガス */ var latlngs=[ latlng_1, latlng_2, latlng_3 ]; var polyline=new GPolyline(latlngs, "#008800", 3, 0.5); map.addOverlay(polyline); /* 中心地点 */ map.setCenter(new GLatLng(35.746512,-166.640625), 2); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* 大きなコントロール */ map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */ /* マーカー追加 */ map.addOverlay(new GMarker(latlng_1)); map.addOverlay(new GMarker(latlng_2)); map.addOverlay(new GMarker(latlng_3)); } } window.onload=load; window.unload=GUnload; //]]> </script> <p><strong>【日本からラスベガスまでの航路】</strong></p> <div id="map" style="width:600px;height:300px"><!-- 地図描画領域 --></div>
山手線一周

<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,marker; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* ピクセル座標 */ var st_1=new GLatLng(35.691034,139.70026); /* 新宿駅 */ var st_2=new GLatLng(35.683061,139.702041); /* 代々木駅 */ var st_3=new GLatLng(35.670284,139.702685); /* 原宿駅 */ var st_4=new GLatLng(35.658517,139.701333); /* 渋谷駅 */ var st_5=new GLatLng(35.6468,139.710109); /* 恵比寿駅 */ var st_6=new GLatLng(35.634,139.715828); /* 目黒駅 */ var st_7=new GLatLng(35.626444,139.723445); /* 五反田駅 */ var st_8=new GLatLng(35.619698,139.728552); /* 大崎駅 */ var st_9=new GLatLng(35.630154,139.74044); /* 品川駅 */ var st_10=new GLatLng(35.645736,139.747574); /* 田町駅 */ var st_11=new GLatLng(35.655649,139.756747); /* 浜松町駅 */ var st_12=new GLatLng(35.666599,139.758126); /* 新橋駅 */ var st_13=new GLatLng(35.675069,139.763324); /* 有楽町駅 */ var st_14=new GLatLng(35.6811,139.767079); /* 東京駅 */ var st_15=new GLatLng(35.691688,139.770888); /* 神田駅 */ var st_16=new GLatLng(35.698684,139.774214); /* 秋葉原駅 */ var st_17=new GLatLng(35.70744,139.774632); /* 御徒町駅 */ var st_18=new GLatLng(35.713765,139.77725); /* 上野駅 */ var st_19=new GLatLng(35.720498,139.778838); /* 鶯谷駅 */ var st_20=new GLatLng(35.727771,139.770985); /* 日暮里駅 */ var st_21=new GLatLng(35.732135,139.76679); /* 西日暮里駅 */ var st_22=new GLatLng(35.738109,139.760717); /* 田端駅 */ var st_23=new GLatLng(35.736489,139.746877); /* 駒込駅 */ var st_24=new GLatLng(35.733493,139.739345); /* 巣鴨駅 */ var st_25=new GLatLng(35.731403,139.728659); /* 大塚駅 */ var st_26=new GLatLng(35.72893,139.710377); /* 池袋駅 */ var st_27=new GLatLng(35.721204,139.70659); /* 目白駅 */ var st_28=new GLatLng(35.712284,139.703785); /* 高田馬場駅 */ var st_29=new GLatLng(35.701307,139.700046); /* 新大久保駅 */ var latlngs=[st_1,st_2, st_3, st_4, st_5, st_6, st_7, st_8, st_9, st_10, st_11, st_12, st_13, st_14, st_15, st_16, st_17, st_18, st_19, st_20, st_21, st_22, st_23, st_24, st_25, st_26, st_27, st_28, st_29]; var polyline=new GPolyline(latlngs, "#ff0000", 3, 0.9); map.addOverlay(polyline); /* 中心地点 */ map.setCenter(new GLatLng(35.684002,139.737618), 12); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* 大きなコントロール */ map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */ /* マーカー追加 */ map.addOverlay(new GMarker(st_1)); map.addOverlay(new GMarker(st_2)); map.addOverlay(new GMarker(st_3)); map.addOverlay(new GMarker(st_4)); map.addOverlay(new GMarker(st_5)); map.addOverlay(new GMarker(st_6)); map.addOverlay(new GMarker(st_7)); map.addOverlay(new GMarker(st_8)); map.addOverlay(new GMarker(st_9)); map.addOverlay(new GMarker(st_10)); map.addOverlay(new GMarker(st_11)); map.addOverlay(new GMarker(st_12)); map.addOverlay(new GMarker(st_13)); map.addOverlay(new GMarker(st_14)); map.addOverlay(new GMarker(st_15)); map.addOverlay(new GMarker(st_16)); map.addOverlay(new GMarker(st_17)); map.addOverlay(new GMarker(st_18)); map.addOverlay(new GMarker(st_19)); map.addOverlay(new GMarker(st_20)); map.addOverlay(new GMarker(st_21)); map.addOverlay(new GMarker(st_22)); map.addOverlay(new GMarker(st_23)); map.addOverlay(new GMarker(st_24)); map.addOverlay(new GMarker(st_25)); map.addOverlay(new GMarker(st_26)); map.addOverlay(new GMarker(st_27)); map.addOverlay(new GMarker(st_28)); map.addOverlay(new GMarker(st_29)); } } window.onload=load; window.unload=GUnload; //]]> </script> <p><strong>【山手線一周】</strong></p> <div id="map" style="width:600px;height:600px"><!-- 地図描画領域 --></div>
球面大地表面に沿ったラインの長さ(メートル単位)を取得
2008/5/5
GPolylineクラスのgetLength()メソッドは、球面大地表面に沿ったラインの長さ(メートル単位)を返します。

<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,marker; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* ピクセル座標 */ 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 ]; var polyline=new GPolyline(latlngs, "#008800", 3, 0.5); map.addOverlay(polyline); /* 中心地点 */ map.setCenter(new GLatLng(35.667216,139.708951), 15); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* 大きなコントロール */ map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */ /* マーカー追加 */ map.addOverlay(new GMarker(latlng_1)); map.addOverlay(new GMarker(latlng_5)); /* ラインの長さを取得 */ document.getElementById("res").value=polyline.getLength(); } } window.onload=load; window.unload=GUnload; //]]> </script> <p>【原宿駅~表参道】</p> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br> <form action="#"> ラインの長さ:<input type="text" id="res" size="40" />(単位:メートル) </form>
地図から指定したラインを削除
2008/5/5
removeイベント
地図から指定したラインを削除するには、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"> //<![CDATA[ var map,polyline1,polyline2; /* ピクセル座標 */ var latlng_1=new GLatLng(35.670284,139.702685); /* 原宿駅 */ var latlng_2=new GLatLng(35.665246,139.712319); /* 表参道駅 */ var latlng_3=new GLatLng(35.658517,139.701333); /* 渋谷駅 */ var latlng_4=new GLatLng(35.6468,139.710109); /* 恵比寿駅 */ var latlngs1=[latlng_1, latlng_2]; var latlngs2=[latlng_3, latlng_4]; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* ライン */ polyline1=new GPolyline(latlngs1, "#ff0000", 5, 0.9); map.addOverlay(polyline1); polyline2=new GPolyline(latlngs2, "#ff0000", 5, 0.9); map.addOverlay(polyline2); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 13); /* コントロール追加 */ map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); /* マーカー追加 */ map.addOverlay(new GMarker(latlng_1)); map.addOverlay(new GMarker(latlng_2)); map.addOverlay(new GMarker(latlng_3)); map.addOverlay(new GMarker(latlng_4)); document.getElementById("res").value=""; } } function fRemoveOverlay(overlay, btnObj){ map.removeOverlay(overlay); document.getElementById("res").value+=btnObj.value+"しました\n"; btnObj.disabled=true; } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"></div><br> <form action="#"> <p> <input type="button" value="ライン(原宿~表参道)を削除" onclick="fRemoveOverlay(polyline1, this)" /> <input type="button" value="ライン(渋谷~恵比寿)を削除" onclick="fRemoveOverlay(polyline2, this)" /> </p> <p> <textarea id="res" cols="64" rows="2" style="width:421px;"></textarea> </p> </form>
ラインのクリックを有効化・無効化
2008/5/5
ラインのクリック操作は、デフォルトで有効になっています。
ラインのクリックを無効にする場合は、GPolylineのオプション引数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[ /* 地理座標 */ 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()){ /* 地図インスタンス生成 */ 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 polyline=new GPolyline(latlngs, "#ff0000", 3, 0.9, opts); map.addOverlay(polyline); /* ラインがクリックされた時 */ GEvent.addListener(polyline, "click", function(latlng){ alert("ラインがクリックされました(地理座標:"+latlng+")"); }); } } window.onload=load; window.unload=GUnload; //]]> </script> <p> 下記の地図は、ラインのクリックを無効にしています。<br> ラインをクリックしても、クリック時に指定した処理が実行されません。 </p> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
地図からすべてのラインを削除
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"> //<![CDATA[ var map,polyline; /* ピクセル座標 */ var latlng_1=new GLatLng(35.670284,139.702685); /* 原宿駅 */ var latlng_2=new GLatLng(35.665246,139.712319); /* 表参道駅 */ var latlng_3=new GLatLng(35.658517,139.701333); /* 渋谷駅 */ var latlng_4=new GLatLng(35.6468,139.710109); /* 恵比寿駅 */ var latlngs1=[latlng_1, latlng_2]; var latlngs2=[latlng_3, latlng_4]; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* ライン */ polyline1=new GPolyline(latlngs1, "#ff0000", 5, 0.9); map.addOverlay(polyline1); polyline2=new GPolyline(latlngs2, "#ff0000", 5, 0.9); map.addOverlay(polyline2); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 13); /* コントロール追加 */ map.addControl(new GLargeMapControl()); map.addControl(new GScaleControl()); /* マーカー追加 */ map.addOverlay(new GMarker(latlng_1)); map.addOverlay(new GMarker(latlng_2)); map.addOverlay(new GMarker(latlng_3)); map.addOverlay(new GMarker(latlng_4)); } } 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
GPolyline.hide()
GPolyline.isHidden()
visibilitychangedイベント
GPolylineクラスのshow()メソッドは、ラインを表示します。
GPolylineクラスのhide()メソッドは、ラインを非表示にします。
GPolylineクラスのisHidden()メソッドは、ラインが非表示かどうかを調べ、非表示の場合にTRUE、そうでない場合にFALSEを返します。
GPolylineクラスのsupportsHide()メソッドは、現在の環境でGPolyline.hide()メソッドがサポートされている場合にTRUE、そうでない場合にFALSEを返します。
GPolylineクラスの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,polyline; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* ピクセル座標 */ 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 ]; /* ライン */ polyline=new GPolyline(latlngs, "#008800", 3, 0.5); map.addOverlay(polyline); /* 中心地点 */ map.setCenter(new GLatLng(35.667216,139.708951), 15); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* 大きなコントロール */ map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */ /* マーカー追加 */ map.addOverlay(new GMarker(latlng_1)); map.addOverlay(new GMarker(latlng_5)); /* ラインの表示状態が変更された時 */ document.getElementById("res").value=""; GEvent.addListener(polyline, "visibilitychanged", function(isVisible){ if(isVisible==true){ document.getElementById("res").value="ラインが表示されました\n"; }else{ document.getElementById("res").value="ラインが非表示になりました\n"; } }); } } function swPolyline(){ var obj=document.getElementById("swbtn"); if(polyline.supportsHide()==true){ if(polyline.isHidden()==true){ /* 非表示→表示 */ polyline.show(); obj.value="ライン非表示"; }else{ /* 表示→非表示 */ polyline.hide(); obj.value="ライン表示"; } }else{ document.write("現在の環境では、GPolyline.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="swPolyline();" /> </p> <p> <input type="text" id="res" style="width:421px;" /> </p> </form>
ラインのクリック時に、クリックした位置の地理座標を取得
2008/5/5
ラインをクリックすると、clickイベントが発生します。
クリックしたラインの地理座標を第1引数latlngとして、イベントハンドラに渡されます。

<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,polyline; /* 地理座標 */ 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")); /* ライン */ polyline=new GPolyline(latlngs, "#ff0000", 3, 0.9); map.addOverlay(polyline); /* 中心地点 */ map.setCenter(new GLatLng(35.667216,139.708951), 15); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* 大きなコントロール */ map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */ /* マーカー追加 */ map.addOverlay(new GMarker(latlng_1)); map.addOverlay(new GMarker(latlng_5)); document.getElementById("res").value=""; /* ラインがクリックされた時 */ GEvent.addListener(polyline, "click", function(latlng){ document.getElementById("res").value+="ラインがクリックされました\n → クリックされた地理地点:"+latlng+"\n"; }); } } function fAddPolyline(){ polyline=new GPolyline(latlngs, "#008800", 3, 0.5); map.addOverlay(polyline); } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br> <form action="#"> <p> <textarea cols="64" rows="7" id="res" style="width:421px;">ラインをクリックしてください</textarea> </p> </form>