Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps JavaScript API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps JavaScript API y servicios relacionados
  3. Crear claves correspondientes
Continuar

Mostrar KML

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

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

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

  1. Configurar el archivo KML
  2. Mostrar KMLlayer
  3. Mostrar datos en la barra lateral

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 filetype de 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 description o incluirlo usando un elemento ExtendedData y reemplazo de entidad (lee la sección siguiente para obtener más información). Es posible acceder a ambos como la propiedad infoWindowHtml de 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
<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 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.
<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 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
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 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
var kmlLayer = new google.maps.KmlLayer();

Crea un nuevo objeto KMLLayer 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 para el objeto KMLLayer que permiten realizar 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 adopte en nivel de zoom del cuadro de límite del contenido de la capa.
  • Fija el mapa en el objeto Map creado anteriormente.
En la guía de referencia de Google Maps JavaScript API, se muestran todas las opciones disponibles para esta capa.
Carga tu archivo HTML para que muestre el contenido del archivo KML como una capa en la parte superior del mapa básico. No obstante, hacer clic en cualquiera de las funciones aún no generará ninguna acción.

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
google.maps.event.addListener(kmlLayer, 'click', function(event) {});

El receptor de eventos google.maps.event.addListener se centra en lo siguiente:
  • El objeto al que se debe aplicar detección. En este instructivo, es el objeto kmlLayer.
  • El tipo de evento que se detectará. En este instructivo, es el evento click.
  • Una función a la que se llamará cuando se produzca el evento.
Puedes obtener más información sobre los eventos en la Guía del desarrollador.

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
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 escribirá y reemplaza su HTML por el contenido de la función.
google.maps.event.addListener(kmlLayer, '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 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..

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.