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

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

引言

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

以下是您將使用本教學課程建立的地圖。這個標記位於烏魯魯卡托塔國家公園 (Uluru-Kata Tjuta National Park) 中的 Uluru (也稱為 Ayers Rock) 中。

下一節將說明本教學課程中建構地圖所需的完整程式碼。

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;

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;

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 */
}

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>

查看範例

開始

在網頁上建立含有標記的地圖時,可採取下列三個步驟:

  1. 建立 HTML 網頁
  2. 加入含有標記的地圖
  3. 取得 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>

請注意,這是一個非常基本的網頁,標題標題三 (h3) 和單一 div 元素。您可以在網頁中新增任何喜歡的內容。

瞭解程式碼

下方程式碼會建立由 head 和主體組成的 HTML 網頁。

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

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

<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 載入您的網頁,以及如何編寫這個 API,透過 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;

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;

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 */
}

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>

查看範例

瞭解程式碼

在下方程式碼中,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 標記來加入包含 initMap 函式的 JavaScript。

  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,
  }
);

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,
});

在上述程式碼中,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,
});

JavaScript

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

進一步瞭解標記:

步驟 3:取得 API 金鑰

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

取得 API 金鑰的步驟如下:

  1. 前往 Google Cloud Console

  2. 建立或選取專案。

  3. 按一下「繼續」即可啟用 API 和任何相關服務。

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

  5. 請參閱「使用 API 金鑰」一節,瞭解如何避免配額遭竊,並保護 API 金鑰安全。

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

  7. 在這個教學課程中複製整個程式碼,並貼到文字編輯器中。

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

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

  9. 儲存名稱結尾為 .html 的檔案 (例如 index.html)。

  10. 在網路瀏覽器中載入 HTML 檔案,只要將檔案從桌面拖曳至瀏覽器中即可。您也可以按兩下檔案,就能在大部分的作業系統上運作。

提示和疑難排解

  • 你可以調整樣式和屬性等選項來自訂地圖。如要進一步瞭解如何自訂地圖,請參閱樣式設定在地圖上繪圖指南。
  • 請使用網路瀏覽器中的開發人員工具控制台來測試並執行程式碼、讀取錯誤報告及解決程式碼問題。
  • 在 Chrome 中開啟下列鍵盤快速鍵:
    Command+Option+J 鍵 (Mac) 或 Control+Shift+J 鍵 (Windows)。
  • 請按照下列步驟操作,取得 Google 地圖上某個地點的經緯度座標。

    1. 在瀏覽器中開啟 Google 地圖。
    2. 在地圖上對需要座標的精確位置按一下滑鼠右鍵。
    3. 在隨即顯示的內容選單中選取「這裡」。 地圖底部會顯示資訊卡。找到資訊卡最後一列的經緯度座標。
  • 您可以使用地理編碼服務將地址轉換成經緯度座標。開發人員指南提供開始使用地理編碼服務的詳細說明。