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!

Answer 1

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