使用 HTML 新增含有標記的 Google 地圖

簡介

本教學課程說明如何使用自訂 HTML 元素，在網頁中新增含有標記的 Google 地圖。下列是您將在本教學課程中建立的地圖。標記位於愛荷華州奧塔姆瓦。

開始使用

如要使用 HTML 建立含有標記的 Google 地圖，請遵循下列步驟：

  1. 取得 API 金鑰
  2. 建立 HTML、CSS 和 JS
  3. 新增地圖
  4. 新增標記

您需要使用網路瀏覽器。請從支援的瀏覽器清單中，根據您使用的平台選擇 Google Chrome (建議使用)、Firefox、Safari 或 Edge 等常見瀏覽器。

步驟 1：取得 API 金鑰

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

取得 API 金鑰的步驟如下：

  1. 前往 Google Cloud 控制台。

  2. 建立或選取所需專案。

  3. 按一下「繼續」以啟用 API 和所有相關服務。

  4. 在「憑證」頁面上，取得 API 金鑰 (並設定 API 金鑰限制)。注意：如果您目前有不受限制的 API 金鑰，或是設有瀏覽器限制的金鑰，可以使用該金鑰。

  5. 如要避免配額竊用行為及保護 API 金鑰，請參閱「使用 API 金鑰」。

  6. 啟用計費功能。詳情請參閱「用量與計費」一文。

  7. 現在您已可使用 API 金鑰。

步驟 2：建立 HTML、CSS 和 JS

下列是基本 HTML 網頁程式碼：

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

如要載入地圖，請務必新增 script 標記，其中包含 Maps JavaScript API 的 Bootstrap 載入器，如下列程式碼片段所示 (加入您自己的 API 金鑰)：

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

由於 HTML 網頁應為獨立網頁，請直接在網頁中加入 CSS 程式碼：

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

步驟 3：新增地圖

如要在網頁中新增 Google 地圖，請複製 gmp-map HTML 元素，然後貼到 HTML 網頁的 body：

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

這會建立以愛荷華州奧塔姆瓦為中心的地圖，但目前沒有標記。

步驟 4：新增標記

如要在地圖中新增標記，請使用 gmp-advanced-marker HTML 元素。請複製下列程式碼片段，然後貼到您在上一個步驟中新增的整個 gmp-map。

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID"
>
  <gmp-advanced-marker
    position="41.027748173921374, -92.41852445367961"
    title="Ottumwa, IA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

上述程式碼會在 Google 地圖中新增標記。如要使用進階標記，則必須提供地圖 ID (可使用 DEMO_MAP_ID)。

在 JSFiddle 上試用完成的範例。

提示和疑難排解

  • 您可以透過自訂樣式來自訂地圖。
  • 您可以在網路瀏覽器中，使用開發人員工具控制台測試及執行程式碼、閱讀錯誤報告，以及解決程式碼問題。
  • 在 Chrome 中使用下列鍵盤快速鍵開啟控制台：
    Command+Option+J 鍵 (Mac) 或 Control+Shift+J 鍵 (Windows)。

  • 請按照下方步驟操作，取得 Google 地圖上某個地點的經緯度座標。

    1. 在瀏覽器中開啟 Google 地圖。
    2. 在地圖上，對需要座標的精確位置按一下滑鼠右鍵。
    3. 從顯示的內容選單中選取「這是哪裡？」，地圖就會在畫面底部顯示資訊卡，並於卡上最後一列提供經緯度座標。

  • 使用地理編碼服務即可將地址轉換成經緯度座標，開發人員指南也提供地理編碼服務的詳細使用方法。

完整程式碼範例

下列是最終地圖，以及本教學課程使用的完整程式碼範例。

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script type="module" src="./index.js"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </head>
  <body>
    <gmp-map
      center="41.027748173921374, -92.41852445367961"
      zoom="13"
      map-id="DEMO_MAP_ID"
    >
      <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"
      ></gmp-advanced-marker>
    </gmp-map>
  </body>
</html>
index.html