为什么通过带有gmap事件点击监听器的jQuery将自定义类添加到主体时，为什么我的自定义类未应用于主体？

Question

I want to open a slide menu when clicking a gmap marker, but I can't. Here is how I proceeded to achieve that:

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

The same thing is working well with a normal button, when I manage that this way:

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

As you can see there:

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

The "TEST" button on the footer, is working perfectly. Unfortunately, when clicking the gmap marker, nothing happens. I can see on Firebug that something happens on body, but the class "side-panel-open" doesn't stay.

I also tried to just add a class to the body, this way:

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

Nothing happens as with the first code. This is so strange because if I try to add another class, for exemple "class_name". This class will be applied as expected to the body:

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

Documentation: https://developers.google.com/maps/documentation/javascript/examples/event-simple

Answer 1

For the button, you can use the jQuery click event or if you're using a different javascript framework, they will likely have a click event as well. For jQuery, you would do the following:

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

It looks like the addListener method takes the google Map object, not the HTML element for the map. Take a look at the first example here. Programs interested in certain events will register JavaScript event listeners for those events and execute code when those events are received by calling addListener() to register event handlers on the object.

So if you're not already, you'll need to hold onto the reference to your map that is returned when you instantiate the map:

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');
});