CODEWITHSUNDEEP
javascriptgoogle-maps
Tom
Tom

Reputation: 44543

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

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?

Upvotes: 5

Views: 19231

Answers (5)

Paulo
Paulo

Reputation: 416

Please note that it appears to not be possible to have click events within Symbols that are on a Polyline. Nor do they inherit the click events that are attached to the Polyline itself. More information here: Google Maps: clickable polyline icon

Upvotes: 0

paullb
paullb

Reputation: 4325

GPolylines 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.

Upvotes: 0

Benubird
Benubird

Reputation: 19477

Update: in version 3 of the API, you want to use google.maps.event.addListener(object, event, function);

e.g.

google.maps.event.addListener(polyline, 'click', function() {
    alert('you clicked polyline');
    });

For more details, see the events api

Upvotes: 6

johnpfree
johnpfree

Reputation: 11

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!

Upvotes: 1

howardr
howardr

Reputation: 333

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

Upvotes: 2

Related Questions