Información general
En este instructivo se te indica la manera de mostrar información de un archivo KML en un mapa de Google y en la barra lateral. Para obtener más información sobre cómo usar archivos KML en los mapas, lee la guía sobre capas de 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';
/**
* Initializes the map and calls the function that loads the KML layer.
*/
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
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;
});
}
<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 defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
Pruébalo
Desplázate a la esquina superior derecha del bloque de código para copiar el código o abrirlo en JSFiddle.
<!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';
/**
* Initializes the map and calls the function that loads the KML layer.
*/
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
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;
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Primeros pasos
A continuación, se ofrecen los pasos necesarios para crear el mapa y la barra lateral para este instructivo:
Configurar el archivo KML para la importación
Tu archivo KML debe cumplir con el estándar KML. Para obtener información detallada sobre este estándar, consulta el sitio web de Open Geospatial Consortium. En la documentación de Google sobre KML también se describe el lenguaje, y se 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
filetypede Google.
Reemplaza cualquier término de búsqueda por
velodromes, u omite el término para buscar todos los archivos KML.
Si creas tu propio archivo, en el código que se proporciona en este ejemplo se supone que:
- Has alojado 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 buscar y obtener contenido para mostrarlo en el mapa. - El archivo no está en una página protegida con contraseña.
- Tus funciones tienen contenido de la ventana de información. Puedes incluir este contenido en
un elemento
descriptiono incluirlo usando un elementoExtendedDatay reemplazo de entidad (lee la sección siguiente para obtener más información). Es posible acceder a ambos como la propiedadinfoWindowHtmlde la función.
Elementos ExtendedData
El archivo KML que se aborda en este instructivo incluye información sobre funciones en un
elemento ExtendedData. Para poder incluir esta información en la descripción
de la función, usa 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 todas
las marcas de posición. Este elemento Style asigna un valor #[video] al
elemento de texto de BalloonStyle.El formato $[x] indica al analizador de KML que busque un
elemento Data denominado video y que lo use como el
texto del globo. |
|
Cada Placemark contiene un elemento ExtendedData
que, a su vez, contiene el elemento Data.
Ten en cuenta que cada Placemark tiene un solo elemento Data
con un atributo de nombre video.En el archivo para este instructivo se usa el video de YouTube incorporado como valor de texto de globo de cada marcador de posición. |
Puedes obtener más información sobre el reemplazo de entidad en el capítulo Agregar datos personalizados de la documentación de KML.
Mostrar KMLLayer
Inicializar el mapa
En esta tabla, 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 Google Map, le indica el punto en el que debe centrarse y aplicar zoom, y fija el mapa en div.Para obtener más información sobre los aspectos básicos de la creación de un mapa de Google, lee el instructivo Agregar un mapa de Google con un marcador a tu sitio web . |
Crear un KMLLayer
En esta tabla se explica el código que crea un KMLLayer.
| Código y descripción | |
|---|---|
|
Crea un nuevo objeto KMLLayer para mostrar tu KML. |
|
El constructor de KMLLayer configura la URL de tu archivo KML. También define las propiedades para el objeto KMLLayer que permiten realizar lo siguiente:
|
Mostrar datos en la barra lateral
En esta sección, se explica la configuración que permite mostrar contenido de la ventana de información en la barra lateral al hacer clic en una función del mapa. Esto se realiza:
- detectando un evento de clic en cualquiera de las funciones de KMLLayer;
- obteniendo los datos de la función en la que se hizo clic.
- escribiendo esos datos en la barra lateral.
Agregar un receptor de eventos
Google Maps proporciona una función para detectar eventos de usuarios en el
mapa, como los clics o el uso de teclas. Agrega un receptor para esos
eventos click.
En la tabla siguiente, se explica el código para esta sección.
| Código y descripción | |
|---|---|
|
El receptor de eventos google.maps.event.addListener se centra en lo
siguiente:
|
Escribir los datos de las funciones del KML en la barra lateral
A esta altura del instructivo, ya habrás capturado eventos de clics en las funciones de la capa. Ahora puedes configurar la aplicación para escribir los datos de la función 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 escribirá y reemplaza su HTML
por el contenido de la función.
|
|
Estas líneas de código se convierten en la función dentro del constructor de addListener
.
|
Ahora, cada vez que haces clic en una función de KML en el mapa, la barra lateral se actualiza para mostrar el contenido de su ventana de información.
Más información
Obtén más información sobre el uso de archivos KML..
Si necesitas ayuda, visita nuestra