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:
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 componenteExtendedData
y un reemplazo de entidad (obtén más información a continuación). Puedes acceder a ambos desde la propiedadinfoWindowHtml
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 | |
---|---|
|
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. |
|
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 | |
---|---|
|
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 | |
---|---|
|
Crea un objeto KMLLayer nuevo para mostrar tu KML. |
|
El constructor de KMLLayer configura la URL de tu archivo KML. También define las propiedades del objeto KMLLayer que hacen lo siguiente:
|
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 | |
---|---|
|
El objeto de escucha de eventos kmlLayer.addListener se centra en lo siguiente:
|
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 | |
---|---|
|
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 elemento.
|
|
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.