Google maps api demo 2

/**
* @fileoverview Sample showing capturing a KML file click
*   and displaying the contents in a side panel instead of
*   an InfoWindow
*/

var map;
var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml';

/**
* Initializes the map and calls the function that creates polylines.
*/
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
loadKmlLayer(src, map);
}

/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* @param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}

google.maps.event.addDomListener(window, 'load', initialize);

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>KmlFile</name>
<Style id="west_campus_style">
<IconStyle>
<Icon>
<href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text>$[video]</text>
</BalloonStyle>
</Style>
<Placemark>
<name>Google West Campus 1</name>
<styleUrl>#west_campus_style</styleUrl>
<ExtendedData>
<Data name="video">
<value><![CDATA[<iframe width="480" height="360"
src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
allowfullscreen></iframe><br><br>]]></value>
</Data>
</ExtendedData>
<Point>
<coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Google West Campus 2</name>
<styleUrl>#west_campus_style</styleUrl>
<ExtendedData>
<Data name="video">
<value><![CDATA[<iframe width="480" height="360"
src="https://www.youtube.com/embed/nb4gvrNrDWw" frameborder="0"
allowfullscreen></iframe><br><br>]]></value>
</Data>
</ExtendedData>
<Point>
<coordinates>-122.0926995893311,37.42419403634421,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Google West Campus 3</name>
<styleUrl>#west_campus_style</styleUrl>
<ExtendedData>
<Data name="video">
<value><![CDATA[<iframe width="480" height="360"
src="https://www.youtube.com/embed/0hhiEjf7_NA" frameborder="0"
allowfullscreen></iframe><br><br>]]></value>
</Data>
</ExtendedData>
<Point>
<coordinates>-122.0922532985281,37.42301710721216,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>