使用 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 金鑰後，請按一下「YOUR_API_KEY」，將金鑰加入下列程式碼片段。接著，請複製 Bootstrap 指令碼標記，並貼到自己的網頁。

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>

步驟 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 async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap&libraries=map,marker">

搶先試試：在 JSFiddle 上試用完成的範例。

步驟 3：新增地圖

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

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

這樣會產生下列地圖：

您剛建立的地圖是以聖荷西都會區為中心。

步驟 4：新增標記

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

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

上述程式碼會新增兩個標記，並變更 gmp-map 中的 zoom 和 center 參數，以更清楚地顯示這些標記。如要使用進階標記，則必須提供地圖 ID (可使用 DEMO_MAP_ID)。

提示和疑難排解

  • 您可以透過自訂樣式來自訂地圖。
  • 您可以在網路瀏覽器中，使用開發人員工具控制台測試及執行程式碼、閱讀錯誤報告，以及解決程式碼問題。
  • 在 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html