カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

GoogleMap イベントリスナーの追加と削除

この記事は最終更新日から1年以上経過しています。

GoogleMap API v3でのイベントの追加と削除について

GMapインスタンスを生成

var myOptions = {
    center: new google.maps.LatLng(35, 135),
    zoom: 12
};

var map = new google.maps.Map(document.getElementById("map"), myOptions);

例1)「zoom_changed」イベントを追加します。

google.maps.event.addListener(map, "zoom_changed", function(){ });

例2)「click」イベントを追加します。

google.maps.event.addListener(map, "click", function(e){ });

指定したイベントリスナーを削除する

google.maps.event.clearListeners(map, "zoom_changed");

全てのイベントリスナーを削除する

google.maps.event.clearInstanceListeners(map);

リスナーをオブジェクトとして作成し、そのインスタンスを指定してリスナーを削除する

var zoomChanged_listener = google.maps.event.addListener(map, "zoom_changed", function(){ 

});

google.maps.event.removeListener(zoomChanged_listener);

イベントの種類については下記をご参照ください。
[GoogleMap v3のmapオブジェクトのイベント]


2016年10月31日追記

GoogleMapの読み込み完了時に一度だけ実行するイベントを追加

google.maps.event.addListenerOnce(map, "idle", function(){ });

リサイズの場合はトリガーを使用します。

// divリサイズ時mapイベント
google.maps.event.addListener(map, "resize", function(LatLng)
{
    map.setCenter(LatLng, 10);
});

// divリサイズ時mapイベントのトリガー
document.getElementById("map").onresize = function()
{
    var LatLng = map.getCenter();
    google.maps.event.trigger(map, "resize", LatLng);
}
この記事がお役に立ちましたらシェアお願いします
6,723 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です