How do I detect a click event on a google maps PolyLine overlay?

Question

It seems to me that I should be able to do the following to detect a click event on a line on a google map:

var line = new GPolyline( ... );
map.addOverlay(line);
GEvent.addListener(line, "click", function(latlng){ alert("clicked"); });

The api reference says this is available in version 2.88, which was released in 2007(!?), so I'm assuming that's what I'm using, but I don't know how to confirm that.

I also tried setting the {clickable:true} option explicitly (it's supposed to be the default.) I've tested in FireFox 3 and Opera 9.6 so doubt it's browser specific. I'm also using jQuery on the page.

I have plenty of code detecting clicks on markers that works fine, clicking on lines would be really nice, can anyone enlighten me?

Answer 1

I just did a quick test and the following code worked on my test page:

var polyline = new GPolyline([
  new GLatLng(37.4419, -122.1419),
  new GLatLng(37.4519, -122.1519)
], "#ff0000", 10);
map.addOverlay(polyline);

GEvent.addListener(polyline, 'click', function() {
    alert('you clicked polyline');
});

The way to tell what version of google maps you have is to look at the v= parameter of the google maps src url you have

http://maps.google.com/maps?file=api&v=2&key=MY_API_KEY

In this case I have "v=2", that means I am using the latest stable 2 version, which supports clickable polylines (as of today 2.101 is the most recent release). "v=2.x" means you are using an edge release. And any "v=2.5" where the anything after the period (.) is a number refers to a specific release

Answer 2

hey frnds, can we store multiple overlays in array and track which we r removing at run time? thx in advanced, [email protected]

Answer 3

thanks for this!

1. lots of the GMarker click examples have the GEvent BEFORE the addListener(), which does not work I found. reversing the order makes it work.

2. you can find your real version with alert(G_API_VERSION);

Using the stnadard src url above, my is: // G_API_VERSION == 208a

thanks again!

Answer 4

Gpolyliens can be made clickable by adding a click event to them as with other objects (code taken from previous answer):

var polyline = new GPolyline([
  new GLatLng(37.4419, -122.1419),
  new GLatLng(37.4519, -122.1519)
], "#ff0000", 10);
map.addOverlay(polyline);

GEvent.addListener(polyline, 'click', function() {
    alert('you clicked polyline');

});

However, you should also be aware that after the GPolyline event is raised, a click event on the map itself in the same location is raised. Additionally, there is currently a bug (as of Apr 2010) in this particular event as the event parameters do not properly get passed to the map click event. This is a known bug by Google and they are working to fix it.