Search

Google Maps JavaScript API v2Google Maps APIの使い方 － イベント

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

地図タイプが変更された時

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "maptypechanged", function(){処理});

GEventクラスのmaptypechangedイベントは、地図タイプが変更された時に発生します。
イベントハンドラに渡される引数はありません。

サンプルを見る
<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;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GMapTypeControl());
          /* イベント */
        GEvent.addListener(map, "maptypechanged", function(){
            document.getElementById("res").value="地図タイプが「"+map.getCurrentMapType().getName()+"」に変更されました\n";
        });
    }
}
function fAddMapType(type){
    /* 地図タイプ追加 */
    map.addMapType(type);
}
function fRemoveMapType(type){
    /* 地図タイプ削除 */
    map.removeMapType(type);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="text" id="res" style="width:421px;" value="地図タイプを変更してください" />
</form>

地図のズームレベル（倍率）が変更された時

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "zoomend", function(oldLevel, newLevel){処理});

GEventクラスのzoomendイベントは、地図のズームレベル（倍率）が変更された時に発生します。 「変更前のズームレベル」を第1引数oldLevel、「変更後のズームレベル」を第2引数newLevelとして、イベントハンドラに渡します。

サンプルを見る
<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,obj;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        /* ダブルクリックによるズームを有効化 */
        map.enableDoubleClickZoom();
        /* マウスのスクロールホイールを使用したズームを有効化 */
        map.enableScrollWheelZoom();
          /* イベント */
        GEvent.addListener(map, "zoomend", function(oldLevel, newLevel){
            document.getElementById("res").value="地図の倍率が「"+oldLevel+"」→「"+newLevel+"」に変更されました";
        });
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="text" id="res" style="width:421px;" value="地図のズーム（倍率）を変更してください" />
</form>

地図またはマーカーがクリックされた時／ダブルクリックされた時

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "click", function(overlay, point){処理});
GEvent.addListener(イベント発生元オブジェクト, "dblckick", function(overlay, point){処理});

GEventクラスのclickイベントは、地図またはマーカーがクリックされた時に発生します。
GEventクラスのdblclickイベントは、地図またはマーカーがダブルクリックされた時に発生します。

両イベントは、共に第1引数にoverlay、第2引数にpointをとります。

マーカーをクリック／ダブルクリックした時に、「クリック／ダブルクリックしたマーカー」が第1引数overlayとしてイベントハンドラに渡されます。 第2引数pointには「undefind」が入ります。

地図をクリック／ダブルクリックした時に、「クリック／ダブルクリックした地点の地理座標」がpointとしてイベントハンドラに渡されます。 第1引数overlayには「null」が入ります。 ※Google Maps APIドキュメントでは、マーカーのダブルクリックイベントは発生しないとなっていますが、取れるような。

サンプルを見る
<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"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        /* マーカー追加 */
        var marker=new GMarker(new GLatLng(35.670284,139.702685));
        map.addOverlay(marker);

        document.getElementById("res").value="";
        /* 地図をクリックした時 */
        GEvent.addListener(map, "click", fClick);
        /* マーカーをクリックした時 */
        GEvent.addListener(marker, "click", fClick);
        /* 地図をダブルクリックした時 */
        GEvent.addListener(map, "dblclick", fDblClick);
        /* マーカーをダブルクリックした時 */
        GEvent.addListener(marker, "dblclick", fDblClick);
    }
}
function fClick(overlay, point){
    if(overlay==null){
        document.getElementById("res").value+="地図がクリックされました（クリックされた座標："+point+"）\n";
    }else{
        document.getElementById("res").value+="マーカーがクリックされました（クリックされた座標："+point+"）\n";
    }
}
function fDblClick(overlay, point){
    if(overlay==null){
        document.getElementById("res").value+="地図がダブルクリックされました（クリックされた座標："+point+"）\n";
    }else{
        document.getElementById("res").value+="マーカーがダブルクリックされました（クリックされた座標："+point+"）\n";
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <textarea cols="64" rows="6" id="res" style="width:421px;">地図をクリックしてください。</textarea>
</form>

地図上からすべてのオーバーレイが削除された時

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "clearoverlays", function(){処理});

GEventクラスの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;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        /* マーカー表示 */
        map.addOverlay(new GMarker(new GLatLng(35.670284,139.702685)));
        map.addOverlay(new GMarker(new GLatLng(35.665246,139.712319)));
        map.addOverlay(new GMarker(new GLatLng(35.658517,139.701333)));
        /* イベント */
        document.getElementById("res").value="";
        GEvent.addListener(map, "clearoverlays", function(){
            document.getElementById("res").value+="すべてのマーカーが削除されました\n";
        });
    }
}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="load()" />
        <input type="button" value="すべてのオーバーレイ削除" onclick="map.clearOverlays()" />
    </p>
    <textarea cols="64" rows="2" id="res"></textarea>
</form>

地図上からオーバーレイが1つ削除された時

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "removeoverlay", function(overlay){処理});

GEventクラスのremovemaptypeイベントは、地図からオーバーレイが1つ削除された時に発生します。 「削除されたオーバーレイ」が第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, marker_1, marker_2, marker_3;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        /* マーカー追加 */
        marker_1=new GMarker(new GLatLng(35.670284,139.702685));
        marker_2=new GMarker(new GLatLng(35.665246,139.712319))
        marker_3=new GMarker(new GLatLng(35.658517,139.701333))
        map.addOverlay(marker_1);
        map.addOverlay(marker_2);
        map.addOverlay(marker_3);
        /* イベント */
        document.getElementById("res").value="";
        GEvent.addListener(map, "removeoverlay", function(){
            document.getElementById("res").value+="マーカーが1つ削除されました\n";
        });
    }
}
function removeMarker(marker,btnID){
    /* マーカー削除 */
    map.removeOverlay(marker);
    /* 削除ボタン無効化 */
    btnID.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="removeMarker(marker_1, this)" id="btn_add1" />
        <input type="button" value="マーカー削除(表参道駅)" onclick="removeMarker(marker_2, this)" id="btn_add2" />
        <input type="button" value="マーカー削除(渋谷駅)" onclick="removeMarker(marker_3, this)" id="btn_add3" />
    </p>
    <textarea cols="64" rows="2" id="res"></textarea>
</form>

地図上にオーバーレイが1つ追加された時

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "addoverlay", function(overlay){処理});

GEventクラスのaddoverlayイベントは、地図にオーバーレイが1つ追加された時に発生し、 「追加されたオーバーレイ」が第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, marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        /* イベント */
        GEvent.addListener(map, "addoverlay", function(){
            document.getElementById("res").value+="マーカーが1つ追加されました\n";
        });
    }
}
function addMarker(dx,dy,btnID){
    /* マーカー追加 */
    marker=new GMarker(new GLatLng(dx, dy));
    map.addOverlay(marker);
    /* 追加ボタン無効化 */
    btnID.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="addMarker(35.670284,139.702685)" id="btn_add1" />
        <input type="button" value="マーカー追加（表参道駅）" onclick="addMarker(35.665246,139.712319)" id="btn_add2" />
    </p>
    <textarea cols="64" rows="2" id="res"></textarea>
</form>

イベントハンドラの解除

2008/5/5

GEvent.removeListener(handle)

addListner()メソッドまたはaddDomListener()メソッドで登録したイベントハンドラを解除するには、GEventクラスの静的メソッドであるremoveListener()メソッドを使用します。 第1引数handlerに、削除するイベントハンドラを指定します。

サンプルを見る
<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, cEvent, dEvent;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */

        /* 地図をクリックした時 */
        cEvent=GEvent.addListener(map, "click", function(overlay, point){
            document.getElementById("res").value="クリックした地点の地理座標："+point+"\n";
        });
        dEvent=GEvent.addDomListener(document.getElementById("gb"), "click", function(){
            document.getElementById("res").value="現在の地図の矩形領域："+map.getBounds();
        });
    }
}
function fRemoveEvent(eObj){
    document.getElementById("res").value="";
    /* イベントハンドラ削除 */
    GEvent.removeListener(eObj);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        <input type="button" id="gb" value="地図の矩形領域を取得" /><br>
        <textarea id="res" cols="64" rows="2" style="width:421px;">地図をクリックしてください</textarea>
    </p>
    <fieldset style="width:402px;">
        <legend>イベントハンドラ解除</legend>
        <input type="button" value="地図クリック）" onclick="fRemoveEvent(cEvent)" />
        <input type="button" value="「地図の矩形領域を取得」ボタンクリック" onclick="fRemoveEvent(dEvent)" />
    </fieldset>
</form>

地図上にマウスが乗った時／マウスが離れた時／マウスで移動した時に発生

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "mouseover", function(latlng){処理});
GEvent.addListener(イベント発生元オブジェクト, "mouseout", function(latlng){処理});
GEvent.addListener(イベント発生元オブジェクト, "mousemove", function(latlng){処理});

GEventクラスのmouseoverイベントは、地図上にマウスが乗った時に発生します。 「マウスが乗った地点の地理座標」が第1引数latlngとしてイベントハンドラに渡されます。

GEventクラスのmouseoutイベントは、地図上からマウスが離れた時に発生します。 「マウスが離れた地点の地理座標」が第1引数latlngとしてイベントハンドラに渡されます。

GEventクラスのmousemoveイベントは、地図上をマウスで移動した時に発生します。 「マウスが移動した地点の地理座標」が第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;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        /* マーカー追加 */
        map.addOverlay(new GMarker(new GLatLng(35.670284,139.702685)));
        map.addOverlay(new GMarker(new GLatLng(35.665246,139.712319)));

        /* 地図上にマウスが乗った時 */
        document.getElementById("res").value="";
        GEvent.addListener(map, "mouseover", function(latlng){
            document.getElementById("res").value="地図上にマウスが乗りました\n緯度："+latlng.lat()+"／経度："+latlng.lng()+"\n";
        });
        /* 地図上からマウスが離れた時 */
        GEvent.addListener(map, "mouseout", function(latlng){
            document.getElementById("res").value="地図上からマウスが離れました\n緯度："+latlng.lat()+"／経度："+latlng.lng()+"\n";
        });
        /* 地図上でマウスが移動した時 */
        GEvent.addListener(map, "mousemove", function(latlng){
            document.getElementById("res").value="地図上でマウスが移動しました\n緯度："+latlng.lat()+"／経度："+latlng.lng()+"\n";
        });
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <textarea cols="64" rows="2" id="res" style="width:421px;">地図上にマウスを乗せたり離したり移動したりしてください</textarea>
</form>

地図の移動が開始された時／移動されている時／移動が終了した時

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "movestart", function(){処理});
GEvent.addListener(イベント発生元オブジェクト, "move", function(){処理});
GEvent.addListener(イベント発生元オブジェクト, "moveend", function(){処理});

GEventクラスのmovestartイベントは、地図の移動が開始された時に発生します。
イベントハンドラに渡される引数はありません。

GEventクラスのmoveイベントは、地図が移動されている時に発生します。
イベントハンドラに渡される引数はありません。

GEventクラスのmoveendイベントは、地図の移動が終了した時に発生します。
イベントハンドラに渡される引数はありません。

moveイベントとmoveendイベントは、ドラッグ操作などで地図を移動している時／移動した時だけでなく、詳細地図の表示を変更したり、ズームレベルを変更した時も地図が移動したことになるので、これらのイベントが発生します。 地図タイプを変更した時は、地図が移動されたわけではないのでこれらのイベントは発生しません。

サンプルを見る
<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;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GScaleControl()); /* スケールコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        map.addControl(new GOverviewMapControl()); /* 折りたたみ可能な概観地図 */
        /* マーカー追加 */
        map.addOverlay(new GMarker(new GLatLng(35.670284,139.702685)));
        map.addOverlay(new GMarker(new GLatLng(35.665246,139.712319)));
        /* イベント */
        document.getElementById("res").value="";
        GEvent.addListener(map, "movestart", function(){
            document.getElementById("res").value+="地図の移動が開始されました\n";
        });
        GEvent.addListener(map, "move", function(){
            document.getElementById("res").value+="地図が移動されています\n";
        });
        GEvent.addListener(map, "moveend", function(){
            document.getElementById("res").value+="地図の移動が終了しました\n";
        });
    }
}window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <textarea cols="64" rows="3" id="res" style="width:421px;"></textarea>
</form>

カスタムイベント生成

2008/5/5

GEvent.trigger(source, event, ... )

ページ上のオブジェクトにカスタムイベントを登録するには、GEventクラスのtrigger()メソッドを使用します。 第3引数以降のオプション引数はすべてイベントハンドラ関数へ順番に渡されます。

サンプルを見る
<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"));
        /* 中心地点 */
        map.setCenter(new GLatLng(36.204824,138.252924), 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        /* マーカー追加 */
        marker=new GMarker(map.getCenter());
        map.addOverlay(marker);

        /* 地図をクリックした時 */
        GEvent.addListener(map, "click", function(overlay, point){
            document.getElementById("res").value="point="+point+"\nカスタムイベントで地図をクリックさせた場合はpoint（クリックした地点の地理座標）がとれません。直接マーカーをクリックしないとダメみたいです。";
        });
        /* マーカーをクリックした時 */
        GEvent.addListener(marker, "click", function(overlay, point){
            marker.openInfoWindow("日本です。<br>overlay="+overlay+"<br>カスタムイベントでマーカーをクリックさせた場合はoverlayがとれません。直接地図をクリックしないとダメみたいです。",{maxWidth:200});
        });
        /* カスタムイベント生成 */
        GEvent.trigger(marker, 'click'); /* マーカーをクリック */
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        <textarea cols="64" rows="3" id="res" style="width:421px;"></textarea>
    </p>
</form>

DOMオブジェクトにイベントをバインド

2008/5/5

GEvent.bindDom(source, event, object, method)

ページ上のDOMオブジェクトにイベントを結び付けるには、GEventクラスの静的メソッドであるbindDom()メソッドを使用します。

第1引数sourceには、イベント発生元のDOMオブジェクトを指定します。 第2引数eventには、clickなどのイベントを指定します。 第3引数objectには、カスタムイベントを登録するDOMオブジェクトを指定します。 第3引数methodには、カスタムイベントを指定します。

戻り値として、イベントハンドラを解除するときに使用するハンドラGEventListenerを返します。

サンプルを見る
<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, btnObj;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* マーカー追加 */
        marker=new GMarker(map.getCenter());
        map.addOverlay(marker);

       /* DOMオブジェクトにイベントをバインド */
        btnObj=document.getElementById("btn");
        GEvent.bindDom(btnObj, "click", this, domEvent);
        GEvent.bindDom(btnObj, "dblclick", this, domEvent);
    }
}
function domEvent(obj){
    document.getElementById("res").value="ボタンが"+obj.type+"されました";
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="text" size="40" id="res" value="ボタンをクリックまたはダブルクリックしてください" />
    <input type="button" value="ボタン" id="btn" />
</form>

イベントをバインド

2008/5/5

GEvent.bind(source, event, object, method)

イベントを結び付けるには、GEventクラスの静的メソッドであるbind()メソッドを使用します。

第1引数sourceには、地図オブジェクトやマーカーオブジェクトなどのイベント発生元オブジェクトを指定します。 第2引数eventには、clickなどのイベントを指定します。 第3引数objectには、カスタムイベントを登録するオブジェクトを指定します。 第3引数methodには、カスタムイベントを指定します。

戻り値として、イベントハンドラを解除するときに使用するハンドラGEventListenerを返します。

サンプルを見る
<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, cEvent;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* マーカー追加 */
        marker=new GMarker(map.getCenter());
        map.addOverlay(marker);
        
         document.getElementById("res").value="";
       /* 地図にイベントを結び付ける */
        GEvent.bind(map, "click", this, fGetPoint);
        /* マーカーにイベントを結び付ける */
        GEvent.bind(marker, "click", this, fGetPoint);
    }
}
function fGetPoint(makerObj){
    /* イベント登録 */
    if(makerObj){
        document.getElementById("res").value="マーカーがクリックされました\nクリックされた地点の地理座標："+makerObj;
    }else{
        document.getElementById("res").value="地図がクリックされました";
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        <textarea cols="64" rows="2" id="res" style="width:421px;"></textarea>
    </p>
</form>

地図のドラッグが開始された時／ドラッグされている時／ドラッグが終了した時

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "dragstart", function(){処理});
GEvent.addListener(イベント発生元オブジェクト, "drag", function(){処理});
GEvent.addListener(イベント発生元オブジェクト, "dragend", function(){処理});

GEventクラスのdragstartイベントは、地図のドラッグが開始された時に発生します。
イベントハンドラに渡される引数はありません。

GEventクラスのdragイベントは、地図がドラッグされている時に発生します。
イベントハンドラに渡される引数はありません。

GEventクラスのdragendイベントは、地図のドラッグが終了した時に発生します。
イベントハンドラに渡される引数はありません。

サンプルを見る
<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;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        /* マーカー表示 */
        map.addOverlay(new GMarker(new GLatLng(35.670284,139.702685)));
        map.addOverlay(new GMarker(new GLatLng(35.665246,139.712319)));
        /* イベント */
        document.getElementById("res").value="";
        GEvent.addListener(map, "dragstart", function(){
            document.getElementById("res").value+="地図のドラッグが開始されました\n";
        });
        GEvent.addListener(map, "drag", function(){
            document.getElementById("res").value+="地図がドラッグされています\n";
        });
        GEvent.addListener(map, "dragend", function(){
            document.getElementById("res").value+="地図のドラッグが終了しました\n";
        });
    }
}window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <textarea cols="64" rows="2" id="res">地図をドラッグしてください</textarea>
</form>

情報ウィンドウが表示された時／情報ウィンドウが閉じられる前／閉じられた時

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "infowindowopen", function(){処理});
GEvent.addListener(イベント発生元オブジェクト, "infowindowbeforeclose", function(){処理});
GEvent.addListener(イベント発生元オブジェクト, "infowindowclose", function(){処理});

GEventクラスのinfowindowopenイベントは、情報ウィンドウが表示された時に発生します。
イベントハンドラに渡される引数はありません。

GEventクラスのinfowindowbeforecloseイベントは、情報ウィンドウが閉じられる前に発生します。
イベントハンドラに渡される引数はありません。

GEventクラスのinfowindowcloseイベントは、情報ウィンドウが閉じられた時に発生します。
イベントハンドラに渡される引数はありません。

サンプルを見る
<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,obj;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.658421,139.699069), 17);
        /* 情報ウィンドウ表示 */
        map.openInfoWindowHtml(map.getCenter(), "<p>東京渋谷区にある<a href='http://www.s-markcity.co.jp/'>「マークシティー」</a>です。</p><p><img src='/content/img/ajax/star.png' align='left' alt='' />渋谷駅直結なので雨の日でも便利です。<br>ショッピングやランチどころ満載です。</p>");
         /* イベント */
        document.getElementById("res").value="";
        GEvent.addListener(map, "infowindowopen", function(){
            document.getElementById("res").value+="情報ウィンドウが表示されました\n";
        });
        GEvent.addListener(map, "infowindowbeforeclose", function(){
            document.getElementById("res").value+="情報ウィンドウが閉じられようとしています\n";
        });
        GEvent.addListener(map, "infowindowclose", function(){
            document.getElementById("res").value+="情報ウィンドウが閉じられました\n";
        });
    }
}
function fOpenInfoWindowHtml(){
    /* 情報ウィンドウ表示 */
    map.openInfoWindowHtml(new GLatLng(35.658416,139.69907), "<p>東京渋谷区にある<a href='http://www.s-markcity.co.jp/'>「マークシティー」</a>です。</p><p><img src='/content/img/ajax/star.png' align='left' alt='' />渋谷駅直結なので雨の日でも便利です。<br>ショッピングやランチどころ満載です。</p>");
    document.getElementById("res").value="";
    document.getElementById("btn_open").disabled=true;
    document.getElementById("btn_close").disabled=false;
}
function fCloseInfoWindow(){
    map.closeInfoWindow();
    document.getElementById("btn_open").disabled=false;
    document.getElementById("btn_close").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="fOpenInfoWindowHtml();" id="btn_open" disabled="disabled" />
        <input type="button" value="情報ウィンドウを閉じる" onclick="fCloseInfoWindow();" id="btn_close" />
    </p>
    <textarea cols="64" rows="3" id="res" style="width:421px;"></textarea>
</form>

イベントハンドラの登録

2008/5/5

GEvent.addListener(source, event, handler)

イベントハンドラを登録するには、GEventクラスの静的メソッドであるaddListener()メソッドを使用します。

第1引数sourceには、イベント発生元オブジェクト（GMap2クラスの地図オブジェクトやGMarkerクラスのマーカーオブジェクトなど）を指定します。 第2引数eventには、clickなどのイベントを指定します。 第3引数handlerには、イベントが発生した時に行う処理（関数）を指定します。

戻り値として、イベントハンドラを解除するときに使用するハンドラGEventListenerを返します。

地図またはマーカーが右クリックされた時

2008/5/5

GEvent.addListener(イベント発生元オブジェクト, "singlerightclick", function(point, src[, overlay]){処理});

GEventクラスのsinglerightclickイベントは、地図またはマーカーが右クリックされた時に発生します。 マーカーを右クリックした時に、「右クリックされたマーカー」が第3引数overlayとしてイベントハンドラに渡されます。 地図を右クリックした時に、「右クリックされた地点のピクセル座標」が第1引数point、「右クリックされた地点のDOMイベントのソース要素」が第2引数srcとして、イベントハンドラに渡されます。

地図上でマウスの右ボタンをダブルクリックした場合...

  • 地図のダブルクリックによるズームイン・ズームアウトが有効（GMap2.enableDoubleClickZoom()）になっている場合は、地図がズームアウトするだけで、singlerightclickイベントは発生しません。
  • 地図のダブルクリックによるズームイン・ズームアウトが無効（GMap2.disableDoubleClickZoom()）になっている場合は、singlerightclickイベントが2回発生します。

地図のダブルクリックによるズームイン・ズームアウトはデフォルトで有効になっているため、地図にGMap2.enableDoubleClickZoom()を指定していない場合は、singlerightclickイベントが2回発生することになります。

サンプルを見る
<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;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        /* マーカー追加 */
        map.addOverlay(new GMarker(new GLatLng(35.670284,139.702685)));
        map.addOverlay(new GMarker(new GLatLng(35.665246,139.712319)));
        /* イベント */
        document.getElementById("res").value="";
        GEvent.addListener(map, "singlerightclick", function(){
            document.getElementById("res").value+="地図が右クリックされました\n";
        });
    }
}window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <textarea cols="64" rows="2" id="res" style="width:421px;">地図を右クリックしてください</textarea>
</form>

オブジェクトから指定したイベントハンドラを削除／オブジェクトからすべてのイベントハンドラを削除／イベントハンドラが削除される前に発生するイベント

2008/5/5

GEvent.clearListeners(source, event)
GEvent.clearInstanceListeners(source)
GEvent.addListener(イベント発生元オブジェクト, "clearlisteners", function(event){処理});

オブジェクトから指定したイベントハンドラ（addListner()メソッドまたはaddDomListener()メソッドで登録したイベントハンドラ）を削除するには、GEventクラスの静的メソッドであるclearListeners()メソッドを使用します。 第1引数sourceに地図オブジェクトやマーカーなど「イベントハンドラを削除するオブジェクト」を指定します。 第2引数eventに第1引数で指定した「オブジェクトから削除するイベント」（clickなど）を指定します、

オブジェクトからすべてのイベントハンドラ（addListner()メソッドまたはaddDomListener()メソッドで登録したイベントハンドラ）を削除するには、GEventクラスの静的メソッドであるclearInstanceListeners()メソッドを使用します。 第1引数sourceに地図オブジェクトやマーカーオブジェクトなど「すべてのイベントハンドラを削除するオブジェクト」を指定します。

GEventクラスのclearlistenersイベントは、ページ上のオブジェクト上でclearListeners()メソッドまたはclearInstanceListeners()メソッドがコールされた時、イベントハンドラの削除処理が実行される前にオブジェクト上で発生します。 clearListeners()メソッドの場合は削除されるイベントが、オプションの第1引数eventとして渡されます。 clearInstanceListeners()メソッドの場合、この引数には「undefined」が入ります。

サンプルを見る
<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, cEvent;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */

        /* 地図をクリックした時 */
        cEvent=GEvent.addListener(map, "click", function(overlay, point){
            document.getElementById("res").value="クリックされた地点の地理座標："+point;
        });
        /* 地図をダブルクリックした時 */
        cEvent=GEvent.addListener(map, "dblclick", function(overlay, point){
            document.getElementById("res").value="ダブルクリックされた地点の地理座標："+point;
        });
        GEvent.addListener(map,"clearlisteners", function(event){
            document.getElementById("res").value+=event+"イベントが削除されようとしています\n";
        });
    }
}
function fClear(eventName){
    document.getElementById("res").value="";
    /* 指定したイベントハンドラを削除 */
    GEvent.clearListeners(map, eventName);
}
function fClearAll(){
    document.getElementById("res").value="";
    /* すべてのイベントハンドラを削除 */
    GEvent.clearInstanceListeners(map);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        <textarea cols="64" rows="2" id="res" style="width:421px;">地図をクリック／ダブルクリックした地点の地理座標が表示されます</textarea>
    </p>
    <p>
        【地図から指定したイベントハンドラを削除】<br>
        <input type="button" value="クリックイベント削除" onclick="fClear('click')" />
        <input type="button" value="ダブルクリックイベント削除" onclick="fClear('dblclick')" />
    </p>
    <p>
        【地図からすべてのイベントハンドラを削除】<br>
        <input type="button" value="すべてのイベントハンドラ削除" onclick="fClearAll()" />
    </p>
</form>

ページ上のDOMオブジェクトにイベントハンドラを登録

2008/5/5

GEvent.addDomListener(source, event, handler)

ページ上のDOMオブジェクトにイベントハンドラを登録するには、GEventクラスの静的メソッドであるaddDomListener()メソッドを使用します。

第1引数sourceには、イベント発生元のDOMオブジェクトを指定します。 第2引数eventには、clickなどのイベントを指定します。 第3引数handlerには、イベントが発生した時に行う処理（関数）を指定します。

戻り値として、イベントハンドラを解除するときに使用するハンドラGEventListenerを返します。

サンプルを見る
<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, cEvent, btnObj;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */

        /* ボタンオブジェクト */
        btnObj=document.getElementById("ebtn");
        /* イベント登録 */
        fAddEvent();
        /* ボタンをクリックした時 */
        GEvent.addDomListener(btnObj, "click", function(){
            if(btnObj.value.indexOf("登録")>-1){
                /* イベント登録 */
                fAddEvent();
            }else{
                /* イベント削除 */
                fRemoveEvent();
            }
        });
    }
}
function fAddEvent(){
    /* イベント登録 */
    document.getElementById("res").value="イベントを登録しました";
    btnObj.value="イベント解除";
    cEvent=GEvent.addListener(map, "click", function(overlay, point){
        document.getElementById("res").value=point;
    });
}
function fRemoveEvent(){
    document.getElementById("res").value="イベントを解除しました";
    /* イベント削除 */
    GEvent.removeListener(cEvent);
    btnObj.value="イベント登録";
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        クリックされた地点の地理座標：<br>
        <input type="text" id="res" style="width:421px;" />
    </p>
    <p>
        <input type="button" value="イベントハンドラ解除" id="ebtn" />
    </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