交通状況レイヤ、交通機関レイヤ、自転車レイヤ

交通状況、交通機関および自転車の各レイヤは、基本地図のレイヤを変更して現在の交通状況、地域の交通機関、自転車ルートの情報を表示します。 これらのレイヤは、限られた地域でご利用いただけます。

交通状況レイヤ

Maps JavaScript API では、TrafficLayer オブジェクトを使用してリアルタイムの交通状況（対象地域に限る）を地図に追加できます。交通情報は頻繁に更新されますが、即座には更新されません。同じエリアで高速に連続してリクエストを行っても、結果が異なる可能性があります。

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
サンプルを表示

サンプルを試す

交通機関レイヤ

Maps JavaScript API では、TransitLayer オブジェクトを使用して都市の公共交通機関ネットワークを地図上に表示できます。交通機関レイヤが有効化され、交通機関の情報がサポートされる都市が地図の中心に置かれると、地図には主要な路線が色付きの太い線で表示されます。線の色は、路線事業者からの情報に基づいて設定されています。交通機関レイヤを有効にすると、基本地図のスタイルが変更され、交通機関のルートが強調されます。

公共交通機関を監督する公的機関の関係者の方で、統括地域の情報を地図に含めたい場合は、詳細を Google 乗換案内パートナー プログラムでご確認ください。

次の例は、英国ロンドンの地図で有効化された交通機関レイヤを示しています。

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
サンプルを表示

サンプルを試す

自転車レイヤ

Maps JavaScript API では、BicyclingLayer オブジェクトを使用して自転車用の情報を地図に追加できます。BicyclingLayer では、自転車道のレイヤ、推奨の自転車ルートおよびその他の自転車の使用に特有なオーバーレイが、所定の地図の上にレンダリングされます。また、このレイヤは基本地図自体のスタイルを変更し、自転車ルートに対応する道路を強調し、自転車向きではない道路を目立たなくします。

次の例は、マサチューセッツ州ケンブリッジの地図で有効化された自転車レイヤを示しています。

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
サンプルを表示

サンプルを試す

暗い緑色のルートは、自転車専用ルートを示しています。明るい緑色のルートは、専用の「自転車レーン」がある道路を示しています。破線のルートは、自転車の使用で推奨されるその他の道路や小道を示しています。