Need to trigger an event inside Google Maps infowindow (created using Google Fusion)

Question

I am populating markers on a Google Map using data pulled from a Google Fusion Table (link: https://www.google.com/fusiontables/DataSource?docid=1mWA12GVNH1CDLO41ProqVCqQZBXXfV_r6YVRljw).

When a marker is clicked, an infowindow is displayed. (Note: This action is performed using Google Fusion Tables).

I want to trigger an event to display a youtube video on the page when a link inside of an infowindow is clicked.

On the same page, I created a Google Visualization Table using data pulled from the same Google Fusion Table and I'm able to display a youtube video on the page when a link inside of the Visualization table is clicked using jQuery. I'm calling the same function from the Google Maps Infowindow, but it is not working.

Here is a link to my code on GitHub: https://github.com/mershon1/VICE-guide-to-travel/blob/gh-pages/index_v0.3.1.html.

I am new to programming and do not understand what the issue is. I have searched everywhere for solutions to my problem, but I've not found any specific solutions. Any help would be greatly appreciated. Thanks!

Answer 1

The contents of the automatic infoWindow may be modified.

These infoWindows will also open in applications hosted by google, so the contents must be sanitized to be sure that no malicious code may be injected. When you inspect the infoWindow with the developer-tools you'll see that the val-attribute has been removed.

What you can do: observe the click-event of the FTLayer and modify the infoWindowHTML.

Add this to the end of initialize():

---

google.maps.event.addListener(layer, 'click', function(e) {

  e.infoWindowHtml = '<div class="googft-info-window" >'+
                     '<strong>VICE-Guide to:</strong>'+
                     e.row['Country'].value +
                     '('+e.row['Region'].value+')<br/>'+
                     e.row['Hyperlink'].value +
                     '</div>';
});