資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在網站上新增 Google 地圖？
在本文中，我們將探討 Google 地圖以及如何將 Google 地圖新增到或嵌入到我們的 HTML 模板/網站中。將 Google 地圖嵌入到網站後，我們可以在其中固定一個位置，以向用戶顯示商店或公司的當前位置。
步驟
以下是將 Google 地圖嵌入到 HTML 頁面中需要遵循的步驟：
我們需要生成一個 API 金鑰才能私下使用 Google 地圖。
建立 HTML 容器以放置 Google 地圖。
在 HTML 文件中新增 Google 提供的外部指令碼。
編寫 JavaScript 程式碼以在容器內初始化地圖。
我們將在下面詳細探討以上幾點：
生成 API 金鑰
我們可以從 Google 地圖中獲取位置資料，但在繼續操作之前，我們需要生成 Google 地圖金鑰。此金鑰將授權從 Google 地圖收集資料。您需要按照以下簡單步驟生成此金鑰：
點選並訪問以下連結以開啟 Google Cloud Console。
建立或選擇一個已建立的專案。
點選繼續以啟用 API 並啟用**Maps JavaScript API**。
啟用後，我們現在需要為此建立憑據。
現在導航到左側邊欄中選單的憑據部分。
點選導航欄下方的“**建立憑據**”按鈕，然後選擇“**API 金鑰**”以開始生成憑據。
建立憑據後，您將獲得一個 API 金鑰。
您可以使用此金鑰將地圖嵌入到您的網站中。
建立 HTML 容器以放置 Google 地圖。
現在我們將為放置 Google 地圖建立一個 HTML 容器。我們將在此示例中使用簡單的 div 元素。您可以使用任何您喜歡的元素。您需要按照以下步驟執行此操作：
建立一個新的 HTML 頁面。
在 body 部分內引入空 div 標籤。此外，為該 div 分配一個唯一的 ID，以便稍後用於樣式設定。
現在建立一個 style 標籤，並在該標籤內描述 div 的大小。
在 HTML 文件中新增 Google 提供的外部指令碼
您需要在 HTML 文件中新增以下非同步指令碼以立即執行它。此指令碼應位於回撥中使用的 DOM 元素之後。在 URL 中，您需要輸入您之前生成的 API 金鑰，替換<YOUR_API_KEY>標籤。
<script src=“https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap&libraries=&v=weekly” async> </script>
編寫 JavaScript 程式碼以在容器內初始化地圖
設定 HTML 後，我們需要初始化 JavaScript 以將地圖帶入容器中，併為使用者提供地圖控制元件。它將支援縮放、縮小、滾動等控制元件。
初始化**initMap()**函式。此名稱不能更改，因為它是 Maps API 使用的內建函式。
在此物件中初始化緯度和經度以設定您要顯示的位置。
建立一個新的**google.maps.Map**物件，該物件將容器元素作為輸入。此物件將負責儲存地圖的中心位置和縮放級別。
示例
# map.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Set the size of the div element
that contains the map */
#map {
height: 400px;
width: 400px;
}
h2 {
color: #308d46;
}
</style>
</head>
<body>
<h1 style="color: green;">Welcome to Tutorials Point</h1>
<h2 style="color: grey;">
Add Google Map to your Webpage
</h2>
<!--The div element for the map -->
<div id="map"></div>
<!--Adding script by google -->
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap&libraries=&v=weekly"async></script>
<script>
// Initialize and add the map
function initMap() {
// The location of Geeksforgeeks office
const tutorialsPoint_office = {
lat: 17.43827944602866,
lng: 78.39530424154626
};
// Create the map, centered at tutorialsPoint_office
const map = new google.maps.Map(
document.getElementById("map"), {
// Set the zoom of the map
zoom: 17.56,
center: tutorialsPoint_office,
});
}
</script>
</body>
</html>輸出
836 次檢視
