Google Maps API Ver.3:イベント

今回はイベントの削除とイベントの発生してみたいと思います。

イベントをセレクターから選ぶとイベントが登録されます。
地図内でそのイベントにあった動きをするとメッセージボックスが表示されます。
イベントによってはマウスクリックでメッセージボックスを消す事が出来ない
イベントもあるのでその時はEnterキーでメッセージボックスを消して下さい。


全イベント削除
EventListener.remove();

clickイベント登録
EventListener = google.maps.event.addListener(map, "click", function() {
alert( "clickイベント");
});



1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API3 Sample</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    var EventListener;


    function initialize() {
        var latlng = new google.maps.LatLng(37, 138, true);
        myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDoubleClickZoom: true,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        EventListener = google.maps.event.addListener(map, "click", function() {
            alert( "clickイベント");
        });
    }

    function EventCtrlDisp(ctrl) {
        EventListener.remove();

        switch( ctrl.selectedIndex) {
            case 0 :
                EventListener = google.maps.event.addListener(map, "click", function() {
                    alert( "clickイベント");
                });
                break;
            case 1 :
                EventListener = google.maps.event.addListener(map, "center_changed", function() {
                    alert( "center_changedイベント");
                });
                break;
            case 2 :
                EventListener = google.maps.event.addListener(map, "mouseover", function() {
                    alert( "mouseoverイベント");
                });
                break;
            case 3 :
                EventListener = google.maps.event.addListener(map, "mouseout", function() {
                    alert( "mouseoutイベント");
                });
                break;
            case 4 :
                EventListener = google.maps.event.addListener(map, "rightclick", function() {
                    alert( "rightclickイベント");
                });
                break;
            case 5 :
                EventListener = google.maps.event.addListener(map, "dblclick", function() {
                    alert( "dblclickイベント");
                });
                break;
            case 6 :
                EventListener = google.maps.event.addListener(map, "dragstart", function() {
                    alert( "dragstartイベント");
                });
                break;
            case 7 :
                EventListener = google.maps.event.addListener(map, "dragend", function() {
                    alert( "dragendイベント");
                });
                break;
            case 8 :
                EventListener = google.maps.event.addListener(map, "idle", function() {
                    alert( "idleイベント");
                });
                break;
            case 9 :
                EventListener = google.maps.event.addListener(map, "zoom_changed", function() {
                    alert( "zoom_changedイベント");
                });
                break;
            case 10 :
                EventListener = google.maps.event.addListener(map, "maptypeid_changed", function() {
                    alert( "maptypeid_changedイベント");
                });
                break;
        }
        map.setOptions( myOptions);
    }


//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
イベント:<select onchange="EventCtrlDisp(this)">
<option>click</option>
<option>center_changed</option>
<option>mouseover</option>
<option>mouseout</option>
<option>rightclick</option>
<option>dblclick</option>
<option>dragstart</option>
<option>dragend</option>
<option>idle</option>
<option>zoom_changed</option>
<option>maptypeid_changed</option>
</select>
</body>
</html>




2.エディターで作成したサンプルソースはutf-8エンコードで保存し
 FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私の実働するサンプルURLはここです。

4.表示はこんな感じです。
 セレクターを選択する事イベントが変わるので地図内で操作をしてください。

sample15

にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ



目指せ15位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。

パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


メンタルヘルス ブログランキング へ にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ
プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。

テーマ : Google関連 - ジャンル : コンピュータ

コメント

Javaのイベントハンドラの様ですね。

久しぶりにコメントします。
副業が起動に乗りつつあり、なかなか他の事にまで手を回せてません。
実行してみましたが、Javaのマウスのイベントリスナーの様な処理が出来るのですね。
本当にJavaScriptのみなの?って位のAPIですね。
JavaScriptでここまで出来ると、マウスの動きとか定期的にサーバにポストするとか出来てしまいそうで、逆に怖くなってしまいますね。
キーボードイベントを同じ様にJavaScriptで他のフォームのID・パスワード入力データをリッピング出来てしまいそうな感じです。
ちょっと自身が落ち気味で前向きなコメントが出来なくてすみません。

かわじゅんさんへ

イベントはサンプルの他にもまだあるんですが、上手く動か
なかったり、判らなかったりで…(^^;
動作が確認出来た物だけサンプルにしました。

コメント頂くだけでとても嬉しいです。
コメントの投稿
管理者にだけ表示を許可する