Using addEventListener To Handle jQuery Click Events On Selectors Inside Google Maps infoWindow With jQuery UI Maps

Question

The Problem: When trying to fire jQuery events on selectors within a Google Maps infoWindow, the click event listener required to catch events within the gmap object must be parent to other click functions, resulting in a failure for click events to fire on the first click.

All the solutions I found here on StackOverflow showed how to add the eventListener, but still did not account for the failure to fire on first click issue.

The solution below will work if you are using jQuery UI Maps to populate clickable markers that open infoWindows, and want to be able to target elements inside the infoWindow for jQuery events on your main (parent) page.

This solution solves the typical first fire issue resulting from nested click functions, where jQuery events will not fire on the first click, since your functions must be within the addEventListener for $('map_canvas').gmap() in order to be caught - but then, of course, they would be nested within another click function and therefore wouldn't fire until the second time clicked.

There are surely more standard and/or eloquent ways of achieving this, but aside from requiring slightly non-typical syntax, this solves all the issues and makes a very quick, straightforward, workable solution for an otherwise very frustrating problem, saving you the 8+ hours of wall head bashing it took me to produce.

Answer 1

The Solution:

Use the click event listener on $('#map_canvas').gmap() as a catch-all, with a mainevent function that allows us to determine the class name(s) of the object that was clicked, and then use if statements to see if it matches any of the 'selectors' we wish to use within the infoWindow and perform the regular functions from there on out.

For convenience, jQuery(element) is assigned to be an equivalent to the normal jQuery(this)

Classes are split into an array to account for multiple classes on the clicked object.

Then we just use an if statement to check if the class we wish to use as a selector is in the array of class names for the object that was clicked, and, if so, put in our usual jQuery we would have otherwise put inside a nested click function for the selector, simply substituting (element) for (this) where necessary.

This could very easily be adapted to use id as a selector instead of classes - simply change $(element).attr('class') to $(element).attr('id')

Here is the sample code:

jQuery('#map_canvas').gmap().addEventListener('click', function(mainevent) {

    // We cannot directly target elements inside the Google map and infoWindows with jQuery, so here we catch all clicks on the map and then use if statements to see if the clicked element matches any of the selectors we wish to use.

    var element = jQuery(mainevent.target);
    if ( $(element).attr('class') ) { var MainEventClassList = $(element).attr('class').split(' '); }

    // Gets the classes of the clicked element into an array, so we can check for matches with if statements, as an equivalent to typical jQuery class selectors.  We have also made (element) available as a replacement for (this).



    if ( jQuery.inArray( 'SelectorClassName', MainEventClassList ) >= 0 ) {

        mainevent.preventDefault();
        mainevent.stopPropagation();
        var destinationid = jQuery(element).attr('href');
        alert(destinationid);

    }


});