Search

Google Maps JavaScript API v2Google Maps APIの使い方 － ライン（線分）

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

ラインの境界線を取得

2008/5/5

GPolyline.getBounds()

GPolylineクラスの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,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(index)

GPolylineクラスの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[
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()

GPolylineクラスの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[
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

new GPolyline(latlngs[, color[, weight[, opacity[, opts]]]])

地図にライン（線分）を表示するには、GPolylineクラスを使用します。

第1引数latlngsには、頂点の地理座標を格納した配列を指定します。
オプションの第2引数colorには、ラインの色を#RRGGGBB形式で指定します。
オプションの第3引数weightには、ラインの太さ（単位：ピクセル）を指定します。
オプションの第4引数opacityには、ラインの透明度を0～1の数値で指定します。
オプションの第5引数optsには、ラインのラインのオプション設定（GPolylineOptionsクラス）を指定します。

日本からラスベガスまでの航路

サンプルを見る
<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,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&amp;v=2&amp;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()

GPolylineクラスのgetLength()メソッドは、球面大地表面に沿ったラインの長さ（メートル単位）を返します。

サンプルを見る
<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,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

GMap2.removeOverlay(overlay)
removeイベント

地図から指定したラインを削除するには、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">
//<![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

GPolylineOptionsクラスのclickableプロパティ

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

ラインのクリックを無効にする場合は、GPolylineのオプション引数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[
/* 地理座標 */
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()

地図からすべてのラインを削除するには、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">
//<![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.show()
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&amp;v=2&amp;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イベント

ラインをクリックすると、clickイベントが発生します。
クリックしたラインの地理座標を第1引数latlngとして、イベントハンドラに渡されます。

サンプルを見る
<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,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>

関連コンテンツ

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

投票する 投票結果を見る

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

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

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women