The Traffic, Transit, and Bicycling layers modify the base map layer to display
current traffic conditions, local transit networks, or bicycling route information.
These layers are available in [select regions](https://developers.google.com/maps/coverage.md.txt).

## Traffic Layer

The Maps JavaScript API allows you to add real-time traffic
information (where supported) to your maps using the `TrafficLayer`
object. Traffic information is refreshed frequently, but not instantly. Rapid
consecutive requests for the same area are unlikely to yield different
results.
<iframe src="https://maps-docs-team.web.app/samples/layer-traffic/dist/" allow="fullscreen; "></iframe>

### TypeScript

```typescript
async function init(): Promise<void> {
    const { TrafficLayer } = await google.maps.importLibrary('maps');

    const mapElement =
        document.querySelector<google.maps.MapElement>('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const trafficLayer = new TrafficLayer();

    trafficLayer.setMap(innerMap);
}

void init();
```

### JavaScript

```javascript
async function init() {
    const { TrafficLayer } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const trafficLayer = new TrafficLayer();

    trafficLayer.setMap(innerMap);
}

void init();
```
[View example](https://developers.google.com/maps/documentation/javascript/examples/layer-traffic.md.txt)

### Try Sample

[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/layer-traffic/jsfiddle)

## Transit Layer

The Maps JavaScript API allows you to display the public transit network of a city
on your map using the [`TransitLayer`](https://developers.google.com/maps/documentation/javascript/reference.md.txt#TrafficLayer)
object. When the Transit Layer is enabled, and the map is centered on a city
that supports transit information, the map will display major transit lines as
thick, colored lines. The color of the line is set based upon information from
the transit line operator. Enabling the Transit Layer will alter the style of
the base map to better emphasize transit routes.

If you're a public agency that oversees public transportation for your city and
would like your data to be included, please visit
the [Google Transit Partner
Program](https://maps.google.com/help/maps/mapcontent/transit/) site to learn more.

The following example shows the Transit layer enabled on a map of London, UK:
<iframe src="https://maps-docs-team.web.app/samples/layer-transit/dist/" allow="fullscreen; "></iframe>

### TypeScript

```typescript
async function init(): Promise<void> {
    const { TransitLayer } = await google.maps.importLibrary('maps');

    const mapElement =
        document.querySelector<google.maps.MapElement>('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const transitLayer = new TransitLayer();

    transitLayer.setMap(innerMap);
}

void init();
```

### JavaScript

```javascript
async function init() {
    const { TransitLayer } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const transitLayer = new TransitLayer();

    transitLayer.setMap(innerMap);
}

void init();
```
[View example](https://developers.google.com/maps/documentation/javascript/examples/layer-transit.md.txt)

### Try Sample

[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/layer-transit/jsfiddle)

## Bicycling Layer

The Maps JavaScript API allows you to add bicycle information to your maps using
the `BicyclingLayer` object. The `BicyclingLayer` renders a layer of bike
paths, suggested bike routes and other overlays specific to bicycling usage on
top of the given map. Additionally, the layer alters the style of the base map
itself to emphasize streets supporting bicycle routes and de-emphasize streets
inappropriate for bicycles.

The following example shows the Bicycle layer enabled on a map of
Cambridge, MA:
<iframe src="https://maps-docs-team.web.app/samples/layer-bicycling/dist/" allow="fullscreen; "></iframe>

### TypeScript

```typescript
async function init(): Promise<void> {
    const { BicyclingLayer } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;

    const bikeLayer = new BicyclingLayer();

    bikeLayer.setMap(innerMap);
}

void init();
```

### JavaScript

```javascript
async function init() {
    const { BicyclingLayer } = await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    const bikeLayer = new BicyclingLayer();

    bikeLayer.setMap(innerMap);
}

void init();
```
[View example](https://developers.google.com/maps/documentation/javascript/examples/layer-bicycling.md.txt)

### Try Sample

[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/layer-bicycling/jsfiddle)

Dark green routes indicated dedicated bicycle routes. Light green routes
indicate streets with dedicated "bike lanes." Dashed routes indicate streets or
paths otherwise recommended for bicycle usage.