Camadas são objetos no mapa que consistem em um ou mais itens separados, mas manipulados como uma unidade. As camadas geralmente refletem coleções de objetos adicionadas sobre o mapa para designar uma associação comum. A API Maps JavaScript gerencia a apresentação de objetos em camadas renderizando os itens constituintes deles em um objeto (geralmente, uma sobreposição de blocos) e mostrando-as como mudanças da janela de visualização do mapa. As camadas também podem mudar a camada de apresentação do próprio mapa, alterando um pouco os blocos básicos de forma consistente com a camada. Por padrão, não é possível acessar a maioria das camadas usando os objetos individuais. No entanto, elas só podem ser manipuladas como uma unidade.
Visão geral das camadas
A API Maps JavaScript tem vários tipos de camada:
- A camada de dados do Google Maps apresenta um contêiner para dados geoespaciais arbitrários. Use a camada de dados para armazenar dados personalizados ou exibir dados GeoJSON em um mapa do Google Maps.
- A camada de mapa de calor renderiza dados geográficos usando uma visualização de mapa de calor.
- A camada KML renderiza elementos KML e GeoRSS em uma sobreposição de blocos da API Maps JavaScript.
- A camada de trânsito exibe as condições de trânsito no mapa.
- A camada de transporte público exibe a rede de transporte público da sua cidade no mapa.
- O objeto Camada de bicicleta renderiza uma camada de ciclovias e/ou sobreposições específicas de bicicletas em uma camada comum. Essa camada é retornada por padrão dentro de DirectionsRenderer ao solicitar rotas do meio de transporte bicicleta.
Adicionar uma camada
Para adicionar uma camada a um mapa, basta chamar setMap()
, passando o objeto do mapa em que a camada vai aparecer. Da mesma forma, para ocultar uma camada, chame setMap()
, transmitindo null
.
O snippet abaixo centraliza o mapa em Londres, Reino Unido, e adiciona a camada 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);