Google maps api demo 2

 

demo

/**
 * @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);

 

westcampus.kml

<?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>