Cómo mostrar elementos KML

Descripción general

En este instructivo, se indica cómo mostrar información de un archivo KML en un mapa de Google Maps y en la barra lateral. Para obtener más información sobre el uso de archivos KML en los mapas, consulta la guía de capas KML. Haz clic en un marcador del mapa que se incluye a continuación para ver datos en la barra lateral.

En la siguiente sección, se muestra el código completo que necesitas para crear el mapa y la barra lateral.

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

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  kmlLayer.addListener('click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
<!-- Replace the value of the key parameter with your own API key. -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Pruébalo

Si deseas experimentar con este código en JSFiddle, haz clic en el ícono <> en la esquina superior derecha de la ventana de código.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Cómo comenzar

Estos son los pasos para crear el mapa y la barra lateral de este instructivo:

  1. Configura el archivo KML.
  2. Muestra la capa KMLLayer.
  3. Muestra datos en la barra lateral.

Cómo configurar el archivo KML para la importación

El archivo KML debe cumplir con el estándar KML. Para obtener detalles sobre este estándar, consulta el sitio web de Open Geospatial Consortium. La documentación sobre KML de Google también describe el lenguaje y ofrece una referencia y documentación conceptual para desarrolladores.

Si solo estás aprendiendo y no tienes un archivo KML, puedes hacer lo siguiente:

  • Usa el siguiente archivo KML para este instructivo:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml
    
  • Busca un archivo KML en la Web. Puedes usar el operador de búsqueda filetype de Google.

    Sustituye cualquier término de búsqueda por velodromes, o bien omite el término por completo para buscar todos los archivos KML.

Si creas tu propio archivo, en el código que se proporciona en este ejemplo se supone lo siguiente:

  • Alojaste el archivo públicamente en Internet. Este es un requisito para todas las aplicaciones que cargan KML en una KMLLayer, de modo que los servidores de Google puedan encontrar y recuperar el contenido para mostrarlo en el mapa.
  • El archivo no está en una página protegida con contraseña.
  • Tus elementos tienen contenido en una ventana de información. Puedes incluir este contenido en un componente description o incluirlo mediante un componente ExtendedData y un reemplazo de entidad (obtén más información a continuación). Puedes acceder a ambos desde la propiedad infoWindowHtml del elemento.

Componentes ExtendedData

El archivo KML que aparece en este instructivo incluye información sobre los elementos en un componente ExtendedData. Para incluir esta información en la descripción del elemento, usa el reemplazo de entidad, que es básicamente una variable de la etiqueta BalloonStyle.

En la siguiente tabla, se explica el código de esta sección.

Código y descripción

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

El archivo KML tiene un único componente Style que se aplica a todos los marcadores.
Este componente Style asigna un valor de #[video] al componente de texto de BalloonStyle.
El formato $[x] le indica al analizador de KML que busque un componente Data llamado video y lo use como texto del globo.

<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" 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>

Cada Placemark contiene un componente ExtendedData, que contiene el componente Data. Ten en cuenta que cada Placemark tiene un solo componente Data con un atributo de nombre de video.
En el archivo de este instructivo, se usa el video de YouTube incorporado como el valor del texto de globo de cada marcador.

Puedes obtener más información sobre el reemplazo de entidad en el capítulo Cómo agregar datos personalizados de la documentación sobre KML.

Cómo mostrar la capa KMLLayer

Cómo inicializar el mapa

En esta tabla, se explica el código de esta sección.

Código y descripción

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

Para mostrar elementos KML en un mapa, primero debes crear el mapa.
Este código crea un objeto nuevo de Google Maps, le indica dónde centrarse y hacer zoom, y adjunta el mapa a div.
Para obtener más información sobre los conceptos básicos para crear un mapa de Google Maps, consulta el instructivo Cómo agregar un mapa de Google Maps a tu sitio web.

Cómo crear la capa KMLLayer

En esta tabla, se explica el código que crea un objeto KMLLayer.

Código y descripción

var kmlLayer = new google.maps.KmlLayer();

Crea un objeto KMLLayer nuevo para mostrar tu KML.

var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

El constructor de KMLLayer configura la URL de tu archivo KML. También define las propiedades del objeto KMLLayer que hacen lo siguiente:
  • Indica a la capa que no muestre una ventana de información cuando se haga clic en ella.
  • Indica al mapa que se centre y se acerque al cuadro delimitador del contenido de la capa.
  • Establece el mapa en el objeto Map creado anteriormente.
En la guía de referencia de la API de Maps JavaScript se enumeran todas las opciones disponibles para esta capa.
Carga tu archivo HTML para que muestre el contenido del archivo KML como una capa encima del mapa base. No obstante, hacer clic en alguno de los elementos aún no generará ninguna acción.

Cómo mostrar datos en la barra lateral

En esta sección, se explica la configuración que permite mostrar el contenido de una ventana de información en la barra lateral al hacer clic en un elemento del mapa. Esto sucede de la siguiente manera:

  • Se escucha un evento de clic en alguno de los elementos de KMLLayer.
  • Se obtienen los datos del elemento en el que se hizo clic.
  • Se escriben esos datos en la barra lateral.

Cómo agregar un objeto de escucha de eventos

Google Maps proporciona una función para escuchar los eventos de usuarios en el mapa, como cuando hacen clic o presionan una tecla, y para responder a ellos. Esa función agrega un objeto de escucha para los eventos click.

En la siguiente tabla, se explica el código de esta sección.

Código y descripción

kmlLayer.addListener('click', function(event) {});

El objeto de escucha de eventos kmlLayer.addListener se centra en lo siguiente:
  • El tipo de evento que se debe escuchar; en este instructivo, es el evento click
  • Una función a la que se debe llamar cuando se produce el evento
Puedes obtener más información sobre los eventos en la Guía para desarrolladores.

Cómo escribir los datos de elementos KML en la barra lateral

En esta etapa del instructivo, ya captaste eventos de clic en los elementos de la capa. Ahora puedes configurar la aplicación para que escriba los datos del elemento y el contenido de la ventana de información en la barra lateral.

En la siguiente tabla, se explica el código de esta sección.

Código y descripción

var content = event.featureData.infoWindowHtml;

Escribe el contenido de la ventana de información en una variable.

var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Identifica el div en el que se debe escribir y reemplaza el HTML con el contenido del elemento.

kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Estas líneas de código se convierten en la función dentro del constructor addListener.

Ahora, cada vez que hagas clic en un elemento KML en el mapa, la barra lateral se actualizará para mostrar el contenido de la ventana de información.

Más información

Obtén más información sobre cómo usar los archivos KML.