Capas de tráfico, transporte público y rutas para bicicletas

Las capas de tráfico, transporte público y rutas para bicicletas modifican la capa del mapa base para mostrar las condiciones de tráfico actuales, las redes de transporte público locales o la información de las rutas para bicicletas. Estas capas están disponibles en ciertas regiones.

Capa de tráfico

La API de Maps JavaScript te permite agregar información del tráfico en tiempo real (cuando se admite) a tus mapas con el objeto TrafficLayer. La información del tráfico se actualiza con frecuencia, pero no al instante. Es poco probable que las solicitudes consecutivas rápidas para la misma área generen 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
Ver ejemplo

Prueba la muestra

Capa de transporte público

La API de Maps JavaScript te permite mostrar la red de transporte público de una ciudad en tu mapa con el objeto TransitLayer. Cuando la capa de transporte público esté habilitada y el mapa se encuentre centrado en una ciudad que admita información sobre el transporte público, se mostrarán las líneas de transporte público principales en el mapa con líneas gruesas de color. El color de las líneas se establece según la información del operador de líneas de transporte público. La habilitación de la capa de transporte público modificará el diseño del mapa base para destacar las rutas de transporte público.

Si representas un organismo público que supervisa el transporte público de tu ciudad y deseas que se incluyan tus datos, visita el sitio del Programa de socios de Google Transit para obtener más información.

En el siguiente ejemplo, se muestra la capa de transporte público habilitada en un 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
Ver ejemplo

Prueba la muestra

Capa de rutas para bicicletas

La API de Maps JavaScript te permite agregar información de las rutas para bicicletas a tus mapas con el objeto BicyclingLayer. El objeto BicyclingLayer renderiza una capa de rutas para bicicletas, sugerencias de rutas y otras superposiciones específicas para el uso de bicicletas encima de un mapa determinado. A su vez, la capa modifica el diseño del mapa base para resaltar las calles que admiten rutas para bicicletas y quitar el foco de las que no sean adecuadas para este medio de transporte.

En el siguiente ejemplo, se muestra la capa de rutas para bicicletas habilitada en un mapa de Cambridge, Massachussets:

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
Ver ejemplo

Prueba la muestra

El color verde oscuro identifica las rutas exclusivas para la circulación en bicicleta. El color verde claro indica las calles con ciclovías. Las líneas punteadas indican calles o caminos recomendados para el uso de bicicletas.