Jquery google map plugin, adding event listeners

Question

Can some one explain the meaning of the following code snippet (jQuery.fn[name]) found in the google jquery.ui.map plugin:

jQuery.each(('click mousedown rightclick dblclick mouseover mouseout drag dragend').split(' '), function(i, name) {
    jQuery.fn[name] = function(a, b) {
        return this.addEventListener(name, a, b);
    };
});

And also how we could bind a callback function to the click event on a map object, I have tried the following but the event does not have the latLng attribute:

$('#map_canvas').gmap().click(function(event) {
        alert(event.latLng);
    });

Thanks in advance.

Answer 1

That snippet of code overwrites some of the jQuery methods so that it can be used on some Google Maps objects. E.g.

    var map = $('#map_canvas').gmap('get', 'map')
    $(map).click(function() {
        var self = this; // this is the map object
    });

    $('#map_canvas').gmap('addMarker', { ... }).click(function() {
        var self = this; // this refers to the marker object
    }).hover(function() {
         var self = this; // this refers to the marker object
    });

If you need to bind other events such as zoom_changed then just

var map = $('#map_canvas').gmap('get', 'map');
$(map).addEventListener('zoom_changed', function() {

});

Answer 2

You've answered your own question :) If you want to bind events to your Google Map, you'll have to use this.addEventListener(name, a, b); (that's actually the bit of code that allows you to execute functions on certain events. See below)

Example:

 google.maps.event.addListener(my_map_object, 'click', function() {
    my_map_object.setZoom(8);
    alert("I've just zoomed by clicking the map!");
 });

You can add events to the map object, or any markers that you put on the map.

See https://developers.google.com/maps/documentation/javascript/events for a full explanation. The Google Maps API has good examples of usage, you can learn a lot from them :)

Answer 3

google.maps.event.addListener(marker, 'mouseover', function() {
 $('.hover_div').html('<a target="_blank" href="'+marker.url+'">'+marker.hover + marker.title +'</a>').show();
});

or

    google.maps.event.addListener(marker, 'click', function() {
      window.open(
  marker.url,
  '_blank' // <- This is what makes it open in a new window.
);

I would not use a plugin since its limits your work. Try to read how to create a map yourself.

Answer 4

I have found that stealing all the events from the page and reassigning them to the map causes delegated events to no longer work. For example, if you attempt to trigger() a click on another element, it doesn't work. e.g. - Where setting an event listener for on("click") still works, it won't listen for a programmatically fired click anymore.

I've altered the code on my own copy of the file. Here it is in case anyone is interested. It changes the "names" of the function to add "map" at the front, and capitalize the first letter of the original method:

click() changes to mapClick, dragend changes to mapDragend, etc.

jQuery.each(('click rightclick dblclick mouseover mouseout drag dragend').split(' '), function (i, name) {
        jQuery.fn["map" + name[0].toUpperCase() + name.substr(1)] = function (a, b) {
            return this.addEventListener(name, a, b);
        }
});