資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在不使用API金鑰的情況下在HTML頁面中新增谷歌地圖？
介紹
在本文中，我們將向您展示如何在不使用API金鑰的情況下將谷歌地圖新增到您的網頁。谷歌地圖是由谷歌開發的網路地圖服務，它提供了廣泛的功能，例如街道地圖、衛星影像、街景等等。API金鑰是訪問谷歌地圖API所需的唯一程式碼，但是，也存在無需使用API金鑰即可將谷歌地圖新增到網頁的替代方法。
方法
我們將使用的方法是在不使用API金鑰的情況下在HTML頁面中新增谷歌地圖是使用iframe。
讓我們來看一個例子來詳細瞭解。
方法：使用iframe
使用iframe將谷歌地圖新增到您的網頁是一種簡單易用的方法，不需要API金鑰。使用這種方法，您可以透過簡單地將iframe元素新增到您的HTML程式碼中，輕鬆地將谷歌地圖嵌入到您的網站中。iframe元素是一個HTML標籤，允許您將外部資源（例如網頁或影片）直接嵌入到HTML文件中。
這意味著您可以將谷歌地圖嵌入到您的網頁中，而無需編寫任何JavaScript程式碼或使用任何API。使用這種方法，您可以輕鬆地將谷歌地圖新增到您的網頁中，而無需擔心獲取API金鑰或處理谷歌地圖API的複雜性。此外，這種方法還允許您輕鬆自定義地圖的大小和佈局，讓您可以更好地控制它在網頁上的顯示方式。
示例
以下是使用iframe將谷歌地圖新增到您的網頁的示例：
步驟1 − 前往谷歌地圖網站並搜尋您想在地圖上顯示的位置：
步驟2 − 點選“分享”按鈕，然後點選“嵌入地圖”選項卡：
步驟3 − 複製提供的iframe程式碼：
步驟4 − 將iframe程式碼貼上到您的HTML（index.html）檔案中。
步驟5 − 向iframe新增寬度和高度以調整地圖的大小：
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3806.452697041917!2d78.39076592375736!3d17.43803374982052!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb9144cdba8c47%3A0x937fe346f411a645!2sTutorials%20Point%20(India)%20Ltd.!5e0!3m2!1sen!2sin!4v1673629212535!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe>
步驟6 − 包含地圖iframe嵌入的完整HTML程式碼如下：
示例
<!DOCTYPE html>
<html>
<head>
<title>Google Map Example</title>
<style>
/* Add styles to the map container */
body{
color: green;
background-color: aliceblue;
font-family: 'Courier New', Courier, monospace;
}
.map-container {
width: 100%;
height: 400px;
margin: 20px 0;
/* Add a border and shadow to the container */
border: 1px solid gray;
box-shadow: 2px 2px 5px #ccc;
}
</style>
</head>
<body>
<h1>Welcome to Tutorials Point!</h1>
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3806.452697041917!2d78.39076592375736!3d17.43803374982052!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb9144cdba8c47%3A0x937fe346f411a645!2sTutorials%20Point%20(India)%20Ltd.!5e0!3m2!1sen!2sin!4v1673629212535!5m2!1sen!2sin"
width="100%"
height="100%"
style="border:0;"
allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</body>
</html>
這種方法簡單易行，但它也有一些侷限性。與使用谷歌地圖API實現的地圖相比，在iframe中顯示的地圖將具有一組有限的控制元件和功能。此外，在iframe中顯示的地圖不會完全互動，並且可能無法在某些裝置或瀏覽器上正常工作。
結論
使用iframe是在不使用API金鑰的情況下將谷歌地圖新增到您的網頁的一種簡單有效的方法。透過遵循本文中概述的步驟，您可以輕鬆地將來自谷歌地圖網站的地圖嵌入到您自己的網頁中，從而使使用者可以檢視您想在地圖上顯示的位置。iframe是一個HTML元素，允許您將另一個網頁嵌入到您的網頁中，它是為您的網站新增豐富互動式內容的有力工具。
使用這種方法，您可以不受任何限制地將谷歌地圖新增到您的網頁中，併為您的網站訪問者提供良好的使用者體驗。但是，請記住，這種方法有其自身的侷限性，並且它不是完全互動式的。
9000+ 瀏覽量
