Descripción general
En este instructivo, se explica cómo mostrar información de un archivo KML en un mapa de Google y la barra lateral. Para obtener más detalles respecto de cómo usar archivos KML en mapas, consulta la guía sobre capas KML. Prueba hacer clic en un marcador del mapa siguiente 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>
Introducción
A continuación, se mencionan los pasos necesarios para crear el mapa y la barra lateral para este instructivo:
Configura el archivo KML para la importación
Tu 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 de Google sobre KML también describe el lenguaje y ofrece contenido para desarrolladores, tanto conceptual como de referencia.
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.kmlBusca un archivo KML en la Web. Puedes usar el operador de búsqueda
filetypede Google.
Reemplaza cualquier término de búsqueda por
velodromes. También puedes omitir el término para buscar todos los archivos KML.
Si creas tu propio archivo, ten en cuenta que, en el código de este ejemplo se da por sentado lo siguiente:
- Alojaste el archivo en Internet de forma pública. Este es un requisito para todas las apps que cargan KML en una
KMLLayer, de modo que los servidores de Google puedan buscar y recuperar contenido para mostrarlo en el mapa. - El archivo no está en una página protegida con contraseña.
- Tus componentes tienen contenido de la ventana de información. Puedes poner este contenido en un elemento
descriptiono incluirlo mediante un elementoExtendedDatay reemplazo de entidad (puedes obtener más información abajo). En ambos casos, se puede acceder a ese contenido como la propiedadinfoWindowHtmldel componente.
Elementos ExtendedData
El archivo KML de este instructivo incluye información sobre componentes en un elemento ExtendedData. Para incluir esta información en la descripción del componente, usa el reemplazo de entidad, que es básicamente una variable de la etiqueta BalloonStyle.
En la tabla siguiente, se explica el código para esta sección.
| Código y descripción | |
|---|---|
|
El archivo KML tiene un solo elemento Style que se aplica a todos los marcadores. Este elemento Style asigna un valor de #[video] al elemento de texto de BalloonStyle.El formato $[x] le indica al analizador de KML que busque un elemento Data llamado video y que lo use como texto para el globo. |
|
Cada Placemark contiene un elemento ExtendedData con el elemento Data.
Ten en cuenta que cada Placemark tiene un único elemento Data con un atributo de nombre igual a video.En el archivo para este instructivo, se usa el video de YouTube incorporado como valor de 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.
Muestra el objeto KmlLayer
Inicializa el mapa
En la tabla siguiente, se explica el código para esta sección.
| Código y descripción | |
|---|---|
|
Para mostrar KML en un mapa, primero debes crear el mapa. Este código crea un nuevo objeto de Google Maps, le indica el punto en el que debe centrarse y aplicar zoom, y fija el mapa en el div.Para obtener más información sobre los fundamentos para crear un mapa de Google, 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 se usa para crear una KmlLayer.
| Código y descripción | |
|---|---|
|
Crea un objeto KmlLayer nuevo para mostrar tu archivo KML. |
|
El constructor KmlLayer configura la URL de tu archivo KML. También define las propiedades del objeto KmlLayer que hacen lo siguiente:
|
Muestra los 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 componente del mapa. Esto sucede de la siguiente manera:
- Se escucha un evento de clic en alguno de los componentes de KmlLayer.
- Se obtienen los datos del componente 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 tabla siguiente, se explica el código para esta sección.
| Código y descripción | |
|---|---|
|
El objeto de escucha de eventos kmlLayer.addListener se centra en lo siguiente:
|
Cómo escribir los datos de componentes KML en la barra lateral
En esta etapa del instructivo, ya captaste eventos de clic en los componentes de la capa. Ahora puedes configurar la aplicación para que escriba los datos del componente y el contenido de la ventana de información en la barra lateral.
En la tabla siguiente, se explica el código para esta sección.
| Código y descripción | |
|---|---|
|
Escribe el contenido de la ventana de información en una variable. |
|
Identifica el div en el que se debe escribir y reemplaza el HTML con el contenido del componente.
|
|
Estas líneas de código se convierten en la función dentro del constructor addListener.
|
Ahora, cada vez que hagas clic en un componente 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 archivos KML.