Capas KML y GeoRSS

1. Información general
2. Opciones de capa KML
3. Detalles de funciones KML

La clase KmlLayer convierte elementos KML y GeoRSS en una superposición de mosaicos de la Maps API V3.

Información general

La Google Maps API admite los formatos de datos KML y GeoRSS para la visualización de información geográfica. Estos formatos de datos aparecen en un mapa con un objeto KmlLayer, cuyo constructor toma la URL de un archivo KML o GeoRSS de acceso público.

Nota: Para obtener información sobre los elementos compatibles y las restricciones de tamaño y complejidad, lee la página Soporte de KML en la documentación de KML.

La Goggle Maps API convierte los datos XML geográficos proporcionados en una representación de KML que se muestra en el mapa a través de la superposición de mosaicos V3. Este KML tiene el aspecto (y, en cierta medida, el comportamiento) de elementos de superposiciones V3 conocidos. Los elementos KML <Placemark> y GeoRSS point se representan como marcadores. Por ejemplo, los elementos <LineString> se representan como polilíneas y los elementos <Polygon> como polígonos. Asimismo, los elementos <GroundOverlay> se representan como imágenes rectangulares en el mapa. Algo que cabe observar, sin embargo, es que estos objetos no son Markers, Polylines, Polygons ni GroundOverlays de la Google Maps API. Más bien, se representan en un único objeto en el mapa.

Los objetos KmlLayer aparecen en un mapa una vez configurada la propiedad map de estos. Puedes eliminarlos del mapa llamando a setMap() y pasando null. El objeto KmlLayer administra la representación de estos elementos hijos mediante la recuperación automática de funciones correspondientes para los límites determinados del mapa. A medida que cambian los límites, las funciones del viewport actual se representan de manera automática.

Debido a que los componentes dentro de KmlLayer se representan a pedido, la capa te permite administrar fácilmente la representación de miles de marcadores, polilíneas y polígonos. Ten en cuenta que no puedes acceder a estos objetos constituyentes en forma directa, aunque cada uno de ellos proporciona eventos de clic que devuelven datos sobre ellos.

Opciones de capa KML

El constructor KmlLayer() pasa, de manera opcional, varios elementos KmlLayerOptions:

• map especifica el Map en el cual debe representarse el objeto KmlLayer. Puedes ocultar un objeto KmlLayer fijando este valor en null en el método setMap().
• preserveViewport especifica que el mapa no debe ajustarse conforme a los límites del contenido de KmlLayer al mostrar la capa. De manera predeterminada, cuando se muestra una KmlLayer el mapa recibe un ajuste de zoom y se posiciona para mostrar todo el contenido de la capa.
• suppressInfoWindows indica que las funciones seleccionables de KmlLayer no deben activar la visualización de objetos InfoWindow.

A su vez, al representarse KmlLayer, contiene una propiedad metadata invariable que incluye el nombre, la descripción, el fragmento de código y el nombre de la capa dentro de un literal de objeto KmlLayerMetadata. Puedes inspeccionar esta información usando el método getMetadata(). Debido a que para la representación de objetos KmlLayer se necesita comunicación asincrónica con un servidor externo, te convendrá escuchar el evento metadata_changed, el cual indicará que la propiedad se completó.

En el ejemplo siguiente, se construye un objeto KmlLayer a partir del flujo GeoRSS determinado:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 49.496675, lng: -102.65625}
  });

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.setMap(map);
}

Ver el ejemplo de GeoRSS

En el ejemplo siguiente, se construye un objeto KmlLayer a partir del flujo KML determinado:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 41.876, lng: -87.624}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });
}

Ver el ejemplo de KML

Detalles de funciones KML

Debido a que KML puede incluir un gran número de funciones, no puedes acceder a datos de funciones directamente desde el objeto KmlLayer. En contraposición, a medida que las funciones se muestran se representan de modo que tengan el aspecto de superposiciones de la Google Maps API. De manera predeterminada, cuando se hace clic en funciones individuales aparece un objeto InfoWindow que contiene información de <title> y <description> de KML relacionada con la función determinada. A su vez, cuando se hace clic en una función KML se genera un KmlMouseEvent que pasa la siguiente información:

• position indica las coordenadas de latitud y longitud en las cuales debe fijarse el objeto InfoWindow para esta función KML. Esta posición generalmente corresponde a la ubicación seleccionada de polígonos, polilíneas y objetos GroundOverlay, y al verdadero origen de marcadores.
• pixelOffset indica el offset del objeto position de arriba para fijar la “cola” de InfoWindow. En el caso de los objetos poligonales, este offset normalmente es de 0,0, pero en el caso de los marcadores se incluye la altura.
• featureData contiene una estructura JSON de KmlFeatureData.

Aquí se muestra un ejemplo de objeto KmlFeatureData:

{
  author: {
    email: "[email protected]",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

En el ejemplo siguiente, se muestra texto de <Description> de la función KML dentro de un elemento <div> lateral cuando se hace clic en la función:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 37.06, lng: -95.68}
  });

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml',
    suppressInfoWindows: true,
    map: map
  });

  kmlLayer.addListener('click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
}

Ver el ejemplo de KML