Google Maps Javascript v3 Polyline click event

Question

I'm trying to make display a map with a number of routes laid out as polylines. When a polyline is clicked I want to display data specific to that line. Associating data with a line isn't a problem, but no matter which line is clicked the data displayed is associated with the most recent line drawn, as if each new polyline overwrites the last. I have a database which contains a link to a gpx file, a link to a video, type of route (which indicates the colour) and some other stuff. The line is drawn by parsing the gpx file and pushing the google maps latlng variables into an array:

                          var p = new google.maps.LatLng(lat, lng); 
                          points.push(p);     
                    }
                    var poly = new google.maps.Polyline({
                          // style here
                              path: points,
                              strokeColor: "Random Colour", //seems to save over the previous colour for each line
                              strokeOpacity: .5,
                              strokeWeight: 4
                        });
                    playVideo(poly, video, map); // Click event function.
                    poly.setMap(map);
             });

The click event function is basically as follows:

function playVideo(poly, video, map){
    google.maps.event.addListener(poly, 'click', function(h) {

             document.getElementById('play').innerHTML = '<iframe width="640" height="360"' + ' src='+ video + '" frameborder="0" allowfullscreen></iframe>';
         });
}

I can't find any solution to this, and have been stuck for a while. It works fine using markers and binding info windows to them, but I need to be able to click on the line. Any help at all is appreciated!

Can you provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue? — geocodezip, Mar 21 '15 at 13:08

score 0 · Answer 1 · answered Mar 21 '15 at 13:27

0

You have a typo (missing " in the "src" of the playVideo function).

function playVideo(poly, video, map){
  google.maps.event.addListener(poly, 'click', function(h) {
         document.getElementById('play').innerHTML = '<iframe width="640" height="360"' + ' src='+ video + '" frameborder="0" allowfullscreen></iframe>';
  });
}

Should be:

function playVideo(poly, video, map){
  google.maps.event.addListener(poly, 'click', function(h) {
         document.getElementById('play').innerHTML = '<iframe width="640" height="360"' + ' src="'+ video + '" frameborder="0" allowfullscreen></iframe>';
  });
}

proof of concept fiddle

answered Mar 21 '15 at 13:27

geocodezip

158,664
13
220
245

Sorry, must've just done that editing the code to stick it up here, the link to the video works. I'm just trying to figure out why each poly line can't have a different video associated with it. – Mullarkb Mar 21 '15 at 13:57
Then please provide an example with more than one "video" (a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue) – geocodezip Mar 21 '15 at 14:45

Google Maps Javascript v3 Polyline click event

1 Answers1

Linked