Incorrect Polyline Click fired when having multiple Polylines on Map

Question

I have multiple polylines on a Google Map and add a 'click' event handler for each. All these polylines are added via javascript code. However when I click on any polyline on map, the click event for the last added polyline is fired. This makes it difficult to identify the line clicked.

The code that creates the Polylines is:

    $.ajax({
                type: "GET",
                url: "MapData.html",
                success: function (json) {
                    mapData = JSON.parse(json);
                    var newroad;
                    for (var i = 0; i < mapData.length; i++) {
                        newroad = new google.maps.Polyline({
                            ID: mapData[i].ID,
                            path: google.maps.geometry.encoding.decodePath(mapData[i].latLngs),
                            strokeColor: 'blue',
                            strokeOpacity: 0.75,
                            strokeWeight: 3
                        });

                        newroad.setMap(map);
                        google.maps.event.addListener(newroad, 'click', function () {

                            setSelectedRoad(newroad);
                        });
                    }
                },
                error: function () {
                    alert('Critical Data Failure');
                }
            });

The data is correctly fetched from the server and all polylines are displayed in blue as expected. The function that gets called when a polyline is clicked is

    function setSelectedRoad(road) {
        road.strokeColor = 'black';
        road.setOptions({ strokeColor: 'black', strokeOpacity: 1.0 });
        selectedRoadID = road.ID;
    }

However the "selectedRoadID" always turns out to be the last polyline added and the color for that line changes to black, even if any other polyline is clicked.

The confusing part is that if I draw a fresh polyline on the map and set its click event to the same function, then that works properly. I do get proper ID for the polyline clicked. This works for any number of new lines drawn and works properly for clicking them in any order.

duncan · Answer 1 · 2016-04-25T12:02:49.897

The problem is you're doing this in a loop:

newroad = new google.maps.Polyline({ ... });

google.maps.event.addListener(newroad, 'click', function () {
     setSelectedRoad(newroad);
});

So you re-create newroad let's say 10 times. Each time you create it, you give the same variable a new event listener, i.e. you're overriding the same event listener 10 times. Not creating 10 separate event listeners, one for each polyline.

When you click on your polyline, you're only therefore executing the very last version of the event listener.

Instead you need to separate out the event listener from the loop. Something like this:

$.ajax({
    type: "GET",
    url: "MapData.html",
    success: function (json) {
        mapData = JSON.parse(json);
        var newroad;
        for (var i = 0; i < mapData.length; i++) {
            newroad = new google.maps.Polyline({
                ID: mapData[i].ID,
                path: google.maps.geometry.encoding.decodePath(mapData[i].latLngs),
                strokeColor: 'blue',
                strokeOpacity: 0.75,
                strokeWeight: 3,
                map: map
            });

            bindEvent(newroad);
        }
    },
    error: function () {
        alert('Critical Data Failure');
    }
});

function bindEvent(newroad) {
    newroad.addListener('click', function () {
        setSelectedRoad(this);
    });
}

This way you call bindEvent 10 times, each time with a different argument for newroad. So you create 10 separate event listeners with a different value for newroad each time.

score 0 · Accepted Answer · answered Apr 26 '16 at 08:40

I found that changing

    newroad.setMap(map);
    google.maps.event.addListener(newroad, 'click', function () {

           setSelectedRoad(newroad);
    });

to

    newroad.setMap(map);
    google.maps.event.addListener(newroad, 'click', function () {

           setSelectedRoad(this);
    });

fixed everything.

Incorrect Polyline Click fired when having multiple Polylines on Map

2 Answers2