gmapイベントリスナーを使用してjQueryを使用してカスタムクラスを追加すると、私のカスタムクラスがbodyに適用されないのはなぜですか？

Question

gmapマーカーをクリックするときにスライドメニューを開きたいができない。ここで私はそれを達成するために進めた方法です。同じことは、私が管理し、通常のボタン、とよく働いている

google.maps.event.addListener(marker, 'click', function() { 
    $('body').toggleClass("side-panel-open"); 
    if($('body').hasClass('device-touch')) { 
     $('body').toggleClass("ohidden"); 
    } 
    return false; 
}); 

、この方法：

$("#test").click(function(){ 
    $('body').toggleClass("side-panel-open"); 
    if($('body').hasClass('device-touch')) { 
     $('body').toggleClass("ohidden"); 
    } 
    return false; 
}); 

あなたが見ることができるように：

http://www.themes.krown.ch/canvas4/HTML/index-fullscreen-image_test.html

フッターの「テスト」ボタンが完全に動作しています。残念ながら、gmapマーカーをクリックしても何も起こりません。私はFirebugで何かが体に起こるのを見ることができますが、 "side-panel-open"クラスは残っていません。

私もちょうど、身体にこの方法をクラスを追加しようとしました：

$('body').addClass('side-panel-open'); 

何も最初のコードのように起こりません。これは非常に奇妙です。なぜなら、私が別のクラスを追加しようとすると、 "class_name"の例です。身体への期待通り、このクラスが適用されます：

$('body').addClass('class_name'); 

ドキュメント： ボタンのhttps://developers.google.com/maps/documentation/javascript/examples/event-simple

Answer 1

、あなたはjQueryのclick eventを使用するかは別のJavaScriptのフレームワークを使用している場合、彼らはそうでしょうクリックイベントもあります。 jQueryのためには、次の操作を行います：

それは addListener方法のように見える

$('#boundaries-states').click(function() { 
//Do something 
}); 

をGoogle Mapオブジェクト、マップのないHTML要素を取ります。最初の例をここで見てください。特定のイベントに関心のあるプログラムは、それらのイベントのJavaScriptイベントリスナーを登録し、オブジェクトにイベントハンドラを登録するためにaddListener()を呼び出すことにより、それらのイベントを受け取ったときにコードを実行します。

すでにじゃないのであれば、あなたがマップをインスタンス化したときに返されるマップへの参照に保持する必要があります：

var map = new google.maps.Map(document.getElementById('boundaries-states'), 
mapOptions); 
Once you have your map reference, you can add a listener using the map object, rather than the HTML element. 

google.maps.event.addListener(map, 'click', function() { 
alert('clicked'); 
});