在網站中加入含有標記的 Google 地圖

簡介

本教學課程說明如何在網頁中加入含有標記的簡易 Google 地圖。適用對象為具備 HTML 和 CSS 初級或中級知識，且對 JavaScript 不太瞭解的使用者。如需建立地圖的進階指南，請參閱開發人員指南。

以下是您將在本教學課程中建立的地圖。標記位於烏魯魯卡塔丘塔國家公園的烏魯魯 (又稱艾爾斯岩)。

下方是您在本教學課程中建立地圖時所需的完整程式碼。

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
style.css

HTML

<html>
  <head>
    <title>Add Map</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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!--
      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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

試用範例

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

開始使用

在網頁上建立含有標記的 Google 地圖時，步驟共有三個：

建立 HTML 網頁
加入含有標記的地圖
取得 API 金鑰

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

步驟 1：建立 HTML 網頁

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

<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!--
      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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

請注意，這是非常基本的網頁，包含第三層標題 (h3) 和一個 div 元素。您可以在網頁中加入任意內容。

瞭解程式碼

下方程式碼會建立 HTML 網頁，包含標題和內文。

<html>
 <head>
 </head>
 <body>
 </body>
</html>

您可以使用下方程式碼，在地圖上方加入第三層標題。

<h3>My Google Maps Demo</h3>

下方程式碼定義網頁上要加入 Google 地圖的區域。

<!--The div element for the map -->
<div id="map"></div>

在教學課程的這個階段中，您尚未加入地圖，因此 div 會顯示為灰色區塊。下方程式碼說明用以設定 div 尺寸和顏色的 CSS。

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}

在上述程式碼中，style 元素會設定地圖的 div 尺寸。請將 div 寬度和高度設為大於 0 像素，以便顯示地圖。在本例中，div 的高度設為 400 像素，寬度設為 100%，依照網頁的完整寬度顯示地圖。

步驟 2：加入含有標記的地圖

本節說明如何在網頁中載入 Maps JavaScript API，以及如何自行編寫 JavaScript，以使用 API 加入含有標記的地圖。

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px; /* The height is 400 pixels */
  width: 100%; /* The width is the width of the web page */
}
style.css

HTML

<html>
  <head>
    <title>Add Map</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>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!--
      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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

試用範例

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

瞭解程式碼

在下方程式碼中，script 會從指定網址載入 API。

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

在上述程式碼中，callback 參數會在 API 載入後執行 initMap 函式。async 屬性可讓瀏覽器在 API 載入時，繼續剖析網頁的其餘部分。載入完成後，瀏覽器會暫停並立即執行指令碼。key 參數包含您的 API 金鑰。

如要瞭解日後如何自行取得 API 金鑰，請參閱「步驟 3：取得 API 金鑰」一節。

下方程式碼包含 initMap 函式，可在網頁載入時初始化並加入地圖。請使用 script 標記加入自己的 JavaScript，其中包含 initMap 函式。

  function initMap() {}

加入 document.getElementById() 函式，即可在網頁上找出地圖 div。

下方程式碼會建立新的 Google 地圖物件，並將屬性加入地圖，包括中心點和縮放等級。請參閱其他屬性選項的說明文件。

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);index.ts

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});index.js

在上述程式碼中，new google.maps.Map() 會建立新的 Google 地圖物件。center 屬性會向 API 指出地圖的中心點。

進一步瞭解如何取得經緯度座標，或將地址轉換成地理座標。

zoom 屬性會指定地圖的縮放等級。「縮放：0」是最低的縮放等級，會顯示整個地球。調高縮放等級值，就能以較高的解析度放大地球。

下方程式碼會在地圖上加入標記。position 屬性會設定標記的位置。

TypeScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.js

進一步瞭解標記：

步驟 3：取得 API 金鑰

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

取得 API 金鑰的步驟如下：

前往 Google Cloud 控制台。
建立或選取所需專案。
按一下「繼續」以啟用 API 和所有相關服務。
在「憑證」頁面上，取得 API 金鑰 (並設定 API 金鑰限制)。注意：如果您目前有不受限制的 API 金鑰，或是設有瀏覽器限制的金鑰，可以使用該金鑰。
如要避免配額竊用行為及保護 API 金鑰，請參閱「使用 API 金鑰」。
啟用計費功能。詳情請參閱「用量與計費」一文。
從這個網頁複製教學課程中的整段程式碼，然後貼到文字編輯器中。

將網址中的 key 參數值換成您自己的 API 金鑰 (也就是您剛取得的 API 金鑰)。

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

儲存這個檔案，檔名結尾為 .html (例如 index.html)。
將 HTML 檔案從桌面拖曳到網路瀏覽器中以進行載入。在大部分的作業系統上，也可以按兩下檔案進行載入。

提示和疑難排解

您可以調整樣式和屬性等選項來自訂地圖。如要進一步瞭解如何自訂地圖，請參閱「樣式」和「在地圖上繪圖」的指南。
您可以在網路瀏覽器中，使用開發人員工具控制台測試及執行程式碼、閱讀錯誤報告，以及解決程式碼問題。
在 Chrome 中使用下列鍵盤快速鍵開啟控制台：
Command+Option+J 鍵 (Mac) 或 Control+Shift+J 鍵 (Windows)。
請按照下方步驟操作，取得 Google 地圖上某個地點的經緯度座標。
1. 在瀏覽器中開啟 Google 地圖。
2. 在地圖上，對需要座標的精確位置按一下滑鼠右鍵。
3. 從顯示的內容選單中選取「這是哪裡？」，地圖就會在畫面底部顯示資訊卡，並於卡上最後一列提供經緯度座標。
使用地理編碼服務即可將地址轉換成經緯度座標，而您可以在開發人員指南找到開始使用地理編碼服務的詳細資訊。