Capas
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Selecciona la plataforma:
Android
JavaScript
Las capas son objetos del mapa que constan de uno o más elementos separados, pero que se manipulan como una sola unidad. Las capas generalmente reflejan colecciones de objetos que puedes agregar sobre el mapa para designar una asociación común. La API de Maps JavaScript administra la presentación de objetos en las capas. Para ello, renderiza los elementos que conforman un objeto (por lo general, una superposición de mosaicos) y los muestra a medida que cambia el viewport del mapa. Las capas también pueden modificar la capa de presentación del propio mapa, lo que altera ligeramente los mosaicos básicos de una manera coherente con la capa. Ten en cuenta que, por su diseño, no es posible acceder a la mayoría de las capas a través de sus objetos individuales, y que solo se las puede manipular como una unidad.
Descripción general de las capas
La API de Maps JavaScript tiene varios tipos de capas:
- La capa de datos de Google Maps proporciona un contenedor para datos geoespaciales arbitrarios.
Puedes usar la capa de datos para almacenar tus datos personalizados o para mostrar datos de GeoJSON en un mapa de Google Maps.
- La capa de mapa de calor renderiza datos geográficos con una visualización de mapa de calor.
- La capa KML renderiza los elementos KML y GeoRSS en una superposición de mosaicos de la API de Maps JavaScript.
- La capa de tráfico muestra las condiciones del tráfico en el mapa.
- La capa de transporte público muestra la red de transporte público de tu ciudad en el mapa.
- La capa de rutas para bicicletas renderiza una capa de ciclovías o superposiciones específicas de bicicletas en una capa común. Esta capa se muestra de forma predeterminada en DirectionsRenderer cuando solicitas instrucciones sobre cómo llegar EN BICICLETA.
Cómo agregar una capa
Para agregar una capa a un mapa, solo debes llamar a setMap()
y pasarle el objeto de mapa en el que se debe mostrar la capa. Del mismo modo, para ocultar una capa, llama a setMap()
y pasa null
.
El siguiente fragmento centra el mapa en Londres, Reino Unido, y agrega la capa de transporte público.
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(51.5,-0.11)
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2025-08-06 (UTC)
[null,null,["Última actualización: 2025-08-06 (UTC)"],[[["\u003cp\u003eLayers in Maps JavaScript API are objects consisting of multiple items that are treated as a single unit and often represent collections of objects on the map.\u003c/p\u003e\n"],["\u003cp\u003eThe API provides various layer types, including Data, Heatmap, KML, Traffic, Transit, and Bicycling layers, each serving a distinct purpose for displaying geospatial data.\u003c/p\u003e\n"],["\u003cp\u003eYou can easily add or hide a layer by calling the \u003ccode\u003esetMap()\u003c/code\u003e method, providing the map object or \u003ccode\u003enull\u003c/code\u003e respectively.\u003c/p\u003e\n"],["\u003cp\u003eThe example code demonstrates adding a Transit layer to a map centered on London.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/android-sdk/utility/multilayer \"View this page for the Android platform docs.\") [JavaScript](/maps/documentation/javascript/layers \"View this page for the JavaScript platform docs.\")\n\nLayers are objects on the map that consist of one or more separate items,\nbut are manipulated as a single unit. Layers generally reflect collections of\nobjects that you add on top of the map to designate a common association. The\nMaps JavaScript API manages the presentation of objects within layers\nby rendering their constituent items into one object (typically a tile overlay) and\ndisplaying them as the map's viewport changes. Layers may also alter the presentation\nlayer of the map itself, slightly altering the base tiles in a fashion\nconsistent with the layer. Note that most layers, by design, may not be\naccessed via their individual objects, but may only be manipulated as a\nunit.\n\nLayers Overview\n\nThe Maps JavaScript API has several types of layers:\n\n- The [**Google Maps Data\n layer**](/maps/documentation/javascript/datalayer) provides a container for arbitrary geospatial data. You can use the Data layer to store your custom data, or to display GeoJSON data on a Google map.\n- The [**Heatmap layer**](/maps/documentation/javascript/heatmaplayer) renders geographic data using a *Heatmap* visualization.\n- The [**KML layer**](/maps/documentation/javascript/kmllayer) renders KML and GeoRSS elements into a Maps JavaScript API tile overlay.\n- The [**Traffic layer**](/maps/documentation/javascript/trafficlayer#traffic_layer) displays traffic conditions on the map.\n- The [**Transit layer**](/maps/documentation/javascript/trafficlayer#transit_layer) displays the public transport network of your city on the map.\n- The [**Bicycling layer**](/maps/documentation/javascript/trafficlayer#bicycling_layer) object renders a layer of bike paths and/or bicycle-specific overlays into a common layer. This layer is returned by default within the **DirectionsRenderer** when requesting directions of travel mode **BICYCLING**.\n\nAdd a layer\n\nTo add a layer to a map, you only need to call `setMap()`,\npassing it the map object on which to display the layer. Similarly, to hide a\nlayer, call `setMap()`, passing `null`.\n\nThe below snippet centers the map on London, UK, and adds the [Transit\nlayer](/maps/documentation/javascript/trafficlayer#transit_layer). \n\n```javascript\nvar mapOptions = {\n zoom: 13,\n center: new google.maps.LatLng(51.5,-0.11)\n}\n\nvar map = new google.maps.Map(document.getElementById(\"map\"), mapOptions);\n\nvar transitLayer = new google.maps.TransitLayer();\ntransitLayer.setMap(map);\n```"]]