Google Maps API V3 Polyline Event Listener Params Not Passed When Loading Multiple Lines From Array

Question

I've successfully added a handler to the click event of polylines I've added to Google Maps (V3) if I code them to be added one at a time, but if I make a for loop to simply iterate through my data, it fails.

Working demos:

http://www.ikfoundation.org/demo/works.html

http://www.ikfoundation.org/demo/fails.html

Code is identical on each apart from the bit that draws the lines:

Works:

var linePts = [[
new google.maps.LatLng(59.454924068851290, 17.094726562500000),
    new google.maps.LatLng(55.984639327677950, 17.270507812500000),
      ],[
new google.maps.LatLng(51.081191044453350, 26.938476562500000),
new google.maps.LatLng(62.112946929861720, 26.586914062500000)
      ]];

// Draw the lines...  

elines[0] = new google.maps.Polyline({
        path: linePts[0],
        strokeColor: "#0000ff",
        strokeOpacity: 1.00,
        strokeWeight: 7,
        clickable: true,
        editable: true,
        geodesic: true,
        zIndex: 1,
        map: map,
        myID: 0
    });



google.maps.event.addListener(elines[0], 'click', function()
{
    lineClick(elines[0]);
});

elines[1] = new google.maps.Polyline({
        path: linePts[1],
        strokeColor: "#0000ff",
        strokeOpacity: 1.00,
        strokeWeight: 7,
        clickable: true,
        editable: true,
        geodesic: true,
        zIndex: 1,
        map: map,
        myID: 1
    });

google.maps.event.addListener(elines[1], 'click', function()
    {
        lineClick(elines[1]);
    });

function lineClick(line)
{
    alert("Line clicked with myID=" + line.myID);
}

Fails (i excluded the same line point definition array which is identical to that shown abovem, and the lineClick function, again identical in both):

for (var i=0; i<=1; i++)
{       
elines[i] = new google.maps.Polyline({
            path: linePts[i],
            strokeColor: "#0000ff",
            strokeOpacity: 1.00,
            strokeWeight: 7,
            clickable: true,
            editable: true,
            geodesic: true,
            zIndex: 1,
            map: map,
            myID: i 
        });

google.maps.event.addListener(elines[i], 'click', function()
        {
            lineClick(elines[i]);
        });
}

What have I done wrong? Both are using the same exact variable names and indexes in those variables. And everything works perfectly as you can see in my example links, apart from the click listener. Which fails in the latter "fails" version because it seems that the polyline is not being passed at all to the lineClick function (you need to run a java debugger to see the error).

Thank you!

score 3 · Accepted Answer · answered Jun 17 '12 at 08:41

3

Sorted it out. Don't understand why (anyone care to elighten?) but replacing the addListener code with the following makes it work:

        google.maps.event.addListener(elines[i], 'click', function()
        {
            lineClick(this);
        });

answered Jun 17 '12 at 08:41

Claud

937
1
12
27

2

The explanation is pretty simple: You cannot refer to elines[i] inside the code block because the block is a callback function triggered by the event. Inside the callback function you have, however, access to the item being clicked using variable "this" as you have done. – karvonen May 26 '16 at 20:30

score 0 · Answer 2 · answered Jun 15 '12 at 21:57

0

It's an issue of variable scope. I would simply declare a new variable at the top of your code (below var elines = [];):

var elines = [];
var myLine;

Then after you instantiate the polyline in the for loop, set myLine = elines[i], as below:

myLine = elines[i];

google.maps.event.addListener(elines[i], 'click', function()
  {
    lineClick(myLine);
  });

answered Jun 15 '12 at 21:57

andresf

2,063
1
11
7

Thanks for the reply! Unfortunately it does not work. Code edited as per your suggestion: http://www.ikfoundation.org/demo/failsagain.html It does result in the alert box showing, but note that the ID shown each time is '1' regardless of which line is clicked upon. – Claud Jun 15 '12 at 23:19

Google Maps API V3 Polyline Event Listener Params Not Passed When Loading Multiple Lines From Array

2 Answers2