您已全部設定完成!

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

啟用 Google Maps JavaScript API

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

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

新增含標記的 Google 地圖到您的網站

簡介

此教學課程說明如何新增含標記的簡單 Google 地圖到網頁。 它適合完全不熟悉或稍微熟悉 HTML 與 CSS 且稍微熟悉 JavaScript 的人。

如需用於建立地圖的進階指南,請參閱開發人員指南

下面是您將使用此教學課程建立的地圖。

下一節顯示建立此教學課程所述之地圖所需的完整程式碼。

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- 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>

自己試試看

將游標放在程式碼區塊右上方,以複製程式碼或在 JSFiddle 中將它開啟。

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

開始

在您的網頁上建立含標記的 Google 地圖有三個步驟:

  1. 建立 HTML 網頁
  2. 新增含標記的地圖
  3. 取得 API 金鑰

您需要網頁瀏覽器。 根據您的平台選擇知名的瀏覽器,例如 Google Chrome (建議使用)、Firefox、Safari 或 Internet Explorer。

步驟 1:建立 HTML 網頁

以下是基本 HTML 網頁的程式碼:

<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
  </body>
</html>

請注意,這是非常基本的網頁,它具有標題層級三(h3)、單一 div 元素,以及一個 style 元素,如下表所述。 您可以新增任何想要的內容到該網頁。

自行嘗試

在上面範例程式碼的右上角有兩個按鈕。 按一下最左邊的按鈕以在 JSFiddle 中開啟範例。

了解程式碼

此表格說明上述程式碼的每一個區段。

程式碼與描述
<html>
 <head>
 </head>
 <body>
 </body>
</html>

建立包含標題與內文的 HTML 網頁。
<h3>My Google Maps Demo</h3>

在地圖上新增標題層級三。
<div id="map"></div>

為您的 Google 地圖定義網頁區域。
在教學課程的此階段,div 只會顯示為灰色區塊,因為您尚未新增地圖。 由於您所套用的 CSS,它是灰色的。 請查看下面的內容。
<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

head 中的 style 元素會為您的地圖設定 div 大小。


div 寬度與高度設定為大於 0px,讓地圖可見。


在此案例中,div 是設定為 500 像素的高度與 100% 的寬度,以跨您的網頁寬度顯示。

background-color: grey 套用到 div 以在網頁上檢視您的地圖區域。

步驟 2:新增含標記的地圖

此節說明如何將 Google Maps JavaScript API 載入到您的網頁,以及如何撰寫自己的 Javascript 以使用 API 在其上新增含標記的地圖。

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  height: 400px;
  width: 100%;
 }
 <!-- 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>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

自行嘗試

在上面範例程式碼的右上角有兩個按鈕。 按一下最左邊的按鈕以在 JSFiddle 中開啟範例。

了解程式碼

請注意,上面的範例已不再包含將 div 設定為灰色的 CSS。 這是因為 div 現在包含地圖。

此表格說明上述程式碼的每一個區段。

程式碼與描述
<script>
async defer
src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>

script 會從指定的網址載入 API。
當 API 完全載入之後,callback 參數會執行 initMap 函式。
載入 API 時,async 屬性可讓瀏覽器繼續轉譯網頁的剩餘部分。
key 參數包含您的 API 金鑰。 在 JSFiddle 中實驗此教學課程時,您不需要自己的 API 金鑰。 請參閱步驟 3:取得 API 金鑰以取得有關如何在稍後取得 API 金鑰的操作說明。
<script>
  function initMap() {
  }
</script>

initMap 函式會在網頁載入時初始化並新增地圖。 使用 script 標記包含您自己的 JavaScript (其中包含 initMap 函式)。
getElementById

新增此函式以在網頁上尋找地圖 div
new google.maps.Map()

新增這個新的 Google 地圖物件,以在 div 元素中建構地圖。
{
  var uluru = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

}

新增屬性(包括中心與縮放層級)到地圖。 請參閱 其他屬性選項的文件。
center 屬性會告知 API 要在哪裡放置地圖中心。 地圖座標是以下列順序設定:緯度經度
zoom 屬性指定地圖的縮放層級。 縮放:0 是最低的縮放,而且會顯示整個地球。 設定較高的縮放值可以較高的解析度放大地球。
var marker = new google.maps.Marker({
  position: uluru,
  map: map
});

新增此程式碼以在地圖上放置標記。 position 屬性可設定標記的位置。

步驟 3:取得 API 金鑰

此節說明如何使用您自己的 API 金鑰讓您的應用程式向 Google Maps JavaScript API 驗證。

依照這些步驟取得 API 金鑰:

  1. 前往 Google API Console
  2. 建立或選取專案。
  3. 按一下 [Continue] 以啟用 API 與任何相關服務。
  4. [Credentials] 頁面上,取得 API 金鑰 (並設定 API 金鑰限制)。

    注意:如果您有現有的不受限制 API 金鑰,或具有瀏覽器限制的金鑰,您可以使用該金鑰。

  5. 為防止配額竊盜,請依照這些最佳做法保護您的 API 金鑰

  6. (選擇性)啟用計費功能。 如需詳細資訊,請參閱使用限制

  7. 從此頁面複製此教學課程的整個程式碼,並貼到您的文字編輯器中。 如果您還沒有文字編輯器,以下是一些建議: 您可以使用:Notepad++ (適用於 Windows);TextEdit (適用於 macOS);gedit 與 KWrite 等 (適用於 Linux 電腦)。

  8. 使用您自己的 API 金鑰(您剛取得的 API 金鑰)取代網址中 key 參數的值。

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
    
  9. 將此檔案儲存為副檔名為 .html 的檔案(例如 google-maps.html)。

  10. 將該 HTML 檔案從您的桌面拖曳到網頁瀏覽器中,以在網頁瀏覽器中載入它。 或者,只要按兩下該檔案即可(在大部分的作業系統上都可透過此方式開啟檔案)。

小竅門與疑難排解

  • 使用 JSFiddle 介面在不同的窗格顯示 HTML、CSS 與 JavaScript 程式碼。 您可以執行該程式碼並在 [Results] 窗格顯示輸出。

  • 您可以調整樣式與屬性等選項,以自訂地圖。 如需有關如何自訂地圖的詳細資訊,請參閱 Maps JavaScript API

  • 在您的網頁瀏覽器中使用 Developer Tools Console 來測試並執行您的程式碼、讀取錯誤報告及解決程式碼的問題。

    用於在 Chrome 開啟該主控台的鍵盤快速鍵: Command+Option+J (在 Mac 上)或 Control+Shift+J (在 Windows 上)。

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁