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.

johansalllarsson · Accepted Answer · 2012-05-19T06:37:27.343

6

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() {

});

edited May 19 '12 at 06:37

answered May 18 '12 at 20:35

johansalllarsson

927
6
8

This is preventing me from triggering a .click() event on another object. How can I fix this? – Sean Kendle Aug 07 '15 at 21:58
Is there a quick way to limit this to only capture events on the actual map, without stealing all other events from the page? – Sean Kendle Aug 10 '15 at 14:33
If anyone else has this problem, see my answer for a possible solution. – Sean Kendle Aug 10 '15 at 15:06

score 1 · Answer 2 · answered May 09 '12 at 10:03

1

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 :)

answered May 09 '12 at 10:03

Flater

12,908
4
39
62

I knew how to add event listners using the google maps API, I just wanted an explanation of the jquery code (for learning purpose), since I could not understand it. – Dilini Rajapaksha May 10 '12 at 06:16
AddEvenListener is used because the events are not handled in a standard Javascript/jQuery way. You'll need to read through the Google Maps API to see the diff. From the site I linked: "These events may look like standard DOM events, but they are actually part of the Maps API. Because different browsers implement different DOM event models, the Maps API provides these mechanisms to listen for and respond to DOM events without needing to handle the various cross-browser peculiarities. These events also typically pass arguments within the event noting some UI state (such as the mouse position)." – Flater May 12 '12 at 19:19

BoqBoq · Answer 3 · 2012-05-09T10:10:59.827

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.

Sean Kendle · Answer 4 · 2015-08-10T15:06:59.507

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

Jquery google map plugin, adding event listeners

4 Answers4

Linked