以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

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

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

  1. 交通状況レイヤ
  2. 交通機関レイヤ
  3. 自転車レイヤ

交通状況レイヤ

Google Maps JavaScript API では、TrafficLayer オブジェクトを使用してリアルタイムの交通状況(対象地域に限る)をマップに追加できます。交通状況は、リクエストが実行された時点のものが提供されます。

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

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031}
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

交通状況の例を見る

交通機関レイヤ

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

交通機関の情報は、限られた地域でのみご利用いただけます。現在公共交通機関の情報が利用可能な都市の一覧は、このリストでご確認いただけます。

公共交通機関を統括するその都市の公共機関様で、統括地域の情報をマップに含めたい場合は、詳細を Google 乗換案内パートナー プログラム でご確認ください。

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

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

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 51.501904, lng: -0.115871}
  });

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}

交通機関の例を見る

自転車レイヤ

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

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

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

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 42.3726399, lng: -71.1096528}
  });

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}

自転車用の例を見る

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

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。