Google Maps Javascript v3 Событие кликов на полилинии

Question

Я пытаюсь отобразить карту с несколькими маршрутами, выложенными как полилинии. При щелчке по полилинии я хочу отображать данные, относящиеся к этой строке. Связывание данных с линией не является проблемой, но независимо от того, какая строка нажата, отображаемые данные связаны с самой последней строкой, как если бы каждая новая полилиния перезаписывала последнюю. У меня есть база данных, которая содержит ссылку на файл gpx, ссылку на видео, тип маршрута (который указывает цвет) и некоторые другие вещи. Линия рисуется разбор файла GPX и толкая Google Maps LatLng переменные в массив: функция событие

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

Клик является в основном следующим образом:

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

Я не могу найти решение этого, и застряли на некоторое время. Он отлично работает, используя маркеры и привязывающие информационные окна к ним, но мне нужно иметь возможность щелкнуть по строке. Любая помощь вообще ценится!

Answer 1

У вас есть опечатка (отсутствует " в «src» функции playVideo).

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

Должен быть:

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