Google Maps (gmap3 plugin), fadeout overlay on click

I have a google map application built using the gmap3 plugin that draws dynamic overlays when a marker is clicked. I am trying to make a button inside the overlay to "dismiss" the overlay using this line from my script:

$('.dismiss-overlay').click(function() {
    $(this).parent('div').fadeOut();
})

I have tested this and everything appears to function just fine when placed outside of the gmap overlay, but when inside the overlay clicking on the button causes nothing to happen. Below is the full script:

$("#map_canvas").gmap3({
        map:{
            options:{
                streetViewControl: false,
                mapTypeControl: false,
                zoom: 0
            }
        },
        marker:{
            values: markers,
            options:{
                draggable: false,
                icon: "files/map-marker.png"
            },
            events:{
                click: function(marker, event, context) {
                    $(this).gmap3({
                        clear:"overlay",
                        overlay: {
                            latLng: marker.getPosition(),
                            options: {
                                content: '<div class="container overlay"><button class="btn btn-xs dismiss-overlay">x close</button>'+$("#"+context.data.id).html()+'</div>',
                                offset: {
                                    y: -30,
                                    x: 30
                                }
                            }
                        },
                    });
                    $(this).gmap3('get').panTo(marker.getPosition());
                    $(this).gmap3('get').panBy(150, 0);
                }
            }
        },
        autofit:{maxZoom: zoom},
    });
});

if you need to see a working example: http://schaffner-publications.com/development/map/

Alright, I found the issue. The thing is that you are creating your overlay dynamically and your event listener is registered during map.js file load. When user clicks 'More info' button on your sample page (http://schaffner-publications.com/development/map/), map is initialised and when user clicks on the marker its overlay is dynamically created and pushed to the page. Specially the close button div. Meaning browser doesn't know anything about the close button (or events on it) unless user clicks on a marker.

In short your event never gets fired because you registered events on .dismis-overlay divs that were available at the map.js load time (& there weren't any, as you create them dynamically).

So to resolve your issue try changing your map.js where you are setting overlay content to the following.

content: '<div class="container-fluid overlay"><button class="btn btn-xs dismiss-overlay" onclick="$(this).parent().toggle();">x close</button>'+$("#"+context.data.id).html()+'</div>',

I have added just below to your code:

onclick="$(this).parent().toggle();"

Not sure if there is specific reason for using gmap3 plugin. If I were you, I would use google map api without it, gives you more control. If you really need clustering, I would go for leaflet.

---

OLD ANSWER (See comments)

---

Instead of parent, just mention the id in the event:

$('.dismiss-overlay').click(function() {
   $('#parkmap').modal('toggle');
})

On the other note, I tried fade-out and it just fades out the modal while the dark background still exists. Standard way of closing the modal will be to use toggle instead of fadeout.

Hope this helps. :)