簡介
本教學課程說明如何使用 HTML,在網頁中新增含有標記的 Google 地圖。下列是您將在本教學課程中建立的地圖。兩個標記分別位於加州山景城和華盛頓州西雅圖。
開始使用
如要使用 HTML 建立含有標記的 Google 地圖,請遵循下列步驟:
您需要使用網路瀏覽器。請從支援的瀏覽器清單中,根據您使用的平台選擇 Google Chrome (建議使用)、Firefox、Safari 或 Edge 等常見瀏覽器。
步驟 1:取得 API 金鑰
本節說明如何使用您自己的 API 金鑰,向 Maps JavaScript API 驗證應用程式。
取得 API 金鑰的步驟如下:
前往 Google Cloud 控制台。
建立或選取所需專案。
按一下「繼續」以啟用 API 和所有相關服務。
在「憑證」頁面上,取得 API 金鑰 (並設定 API 金鑰限制)。注意:如果您目前有不受限制的 API 金鑰,或是設有瀏覽器限制的金鑰,可以使用該金鑰。
如要避免配額竊用行為及保護 API 金鑰,請參閱「使用 API 金鑰」。
啟用計費功能。詳情請參閱「用量與計費」一文。
您現在可以使用 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&v=beta" defer ></script>
搶先試試:在 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>
上述程式碼會新增兩個標記,並變更 gmp-map
中的 zoom
和 center
參數,以更清楚地顯示這些標記。如要使用進階標記,則必須提供地圖 ID (可使用 DEMO_MAP_ID
)。
提示和疑難排解
- 您可以透過自訂樣式來自訂地圖。
- 您可以在網路瀏覽器中,使用開發人員工具控制台測試及執行程式碼、閱讀錯誤報告,以及解決程式碼問題。
- 在 Chrome 中使用下列鍵盤快速鍵開啟控制台:
Command+Option+J 鍵 (Mac) 或 Control+Shift+J 鍵 (Windows)。 請按照下方步驟操作,取得 Google 地圖上某個地點的經緯度座標。
- 在瀏覽器中開啟 Google 地圖。
- 在地圖上,對需要座標的精確位置按一下滑鼠右鍵。
- 從顯示的內容選單中選取「這是哪裡?」,地圖就會在畫面底部顯示資訊卡,並於卡上最後一列提供經緯度座標。
使用地理編碼服務即可將地址轉換成經緯度座標,開發人員指南也提供地理編碼服務的詳細使用方法。
完整程式碼範例
下列是最終地圖,以及本教學課程使用的完整程式碼範例。
<html> <head> <title>Add a Map with Markers using HTML</title> <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 script 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&libraries=maps,marker&v=beta" defer ></script> </body> </html>