您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  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 Transit Partner Program 網站,以瞭解更多詳細資訊。

下列範例顯示啟用了大眾運輸圖層的英國倫敦地圖:

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
需要協助嗎?請前往我們的支援網頁