Camadas de trânsito, transporte público e bicicleta

Essas camadas modificam a camada do mapa de base para mostrar as condições atuais de trânsito, redes locais de transporte público ou informações sobre trajetos de bicicleta. Elas estão disponíveis em algumas regiões.

Camada de trânsito

Com a API Maps JavaScript, você pode adicionar informações de trânsito em tempo real (quando compatível) aos seus mapas usando o objeto TrafficLayer. Essas informações são atualizadas com frequência, mas não instantaneamente. É pouco provável que solicitações consecutivas para a mesma área produzam resultados diferentes.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 34.04924594193164, lng: -118.24104309082031 },
    }
  );

  const trafficLayer = new google.maps.TrafficLayer();

  trafficLayer.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 34.04924594193164, lng: -118.24104309082031 },
  });
  const trafficLayer = new google.maps.TrafficLayer();

  trafficLayer.setMap(map);
}

window.initMap = initMap;
index.js
Exemplo

Testar amostra

Camada de transporte público

Com a API Maps JavaScript, você pode mostrar a rede de transporte público de uma cidade no seu mapa usando o objeto TransitLayer. Quando a camada de transporte público é ativada e o mapa está centralizado em uma cidade que oferece informações desse tipo, o mapa mostra as principais linhas como traços grossos e coloridos. A cor do traço é definida com base nas informações do operador da linha de transporte público. Ativar essa camada muda o estilo do Mapa de base para destacar melhor os trajetos de transporte público.

Se você trabalha em um órgão público que supervisiona o transporte público na sua cidade e quer incluir dados, acesse o site do Programa de parceiros para informações de transporte público.

O exemplo a seguir mostra a camada de transporte público ativada em um mapa de Londres, Reino Unido:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 51.501904, lng: -0.115871 },
    }
  );

  const transitLayer = new google.maps.TransitLayer();

  transitLayer.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 51.501904, lng: -0.115871 },
  });
  const transitLayer = new google.maps.TransitLayer();

  transitLayer.setMap(map);
}

window.initMap = initMap;
index.js
Exemplo

Testar amostra

Camada de bicicleta

Com a API Maps JavaScript, é possível adicionar informações de bicicleta aos mapas usando o objeto BicyclingLayer. O objeto BicyclingLayer renderiza, sobre o mapa especificado, uma camada de caminhos de bicicleta, sugestões de trajetos e outras sobreposições específicas para o uso desse meio de transporte. A camada também altera o estilo do mapa básico para destacar as ruas que permitem trajetos de bicicleta e esmaecer as ruas inapropriadas para isso.

O exemplo abaixo mostra a camada de bicicleta ativada em um mapa de Cambridge, MA, EUA:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 14,
      center: { lat: 42.3726399, lng: -71.1096528 },
    }
  );

  const bikeLayer = new google.maps.BicyclingLayer();

  bikeLayer.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 42.3726399, lng: -71.1096528 },
  });
  const bikeLayer = new google.maps.BicyclingLayer();

  bikeLayer.setMap(map);
}

window.initMap = initMap;
index.js
Exemplo

Testar amostra

Os trajetos para bicicletas são mostrados em verde escuro. As ruas com ciclovias dedicadas são indicadas em verde claro, e os tracejados indicam ruas ou caminhos recomendados para ciclistas.