簡介
本教學課程說明如何在網頁中加入含有標記的簡易 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;
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>
試用範例
開始使用
在網頁上建立含有標記的 Google 地圖時,步驟共有三個:
您需要使用網路瀏覽器。請從支援的瀏覽器清單中,根據您使用的平台選擇 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
元素。您可以在網頁中加入任意內容。
瞭解程式碼
下方程式碼會建立 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;
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
標記加入自己的 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, } );
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 金鑰的步驟如下:
前往 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 地圖上某個地點的經緯度座標。
- 在瀏覽器中開啟 Google 地圖。
- 在地圖上,對需要座標的精確位置按一下滑鼠右鍵。
- 從顯示的內容選單中選取「這是哪裡?」,地圖就會在畫面底部顯示資訊卡,並於卡上最後一列提供經緯度座標。
使用地理編碼服務即可將地址轉換成經緯度座標,而您可以在開發人員指南找到開始使用地理編碼服務的詳細資訊。