在網頁製作中,嵌入 Google 地圖是一個常見的需求。這可以通過使用 Google 地圖平台提供的「嵌入地圖」功能來實現,無需編寫複雜的程式碼。
生成嵌入代碼:
在 HTML 中嵌入地圖:
<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.83543450942!2d144.95592361531823!3d-37.81720997975195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d43f1d30e8d%3A0xc4a5884f5fffd9e3!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1580742684511!5m2!1sen!2sau"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
.map-container {
width: 100%;
height: 400px;
border: 2px solid #ccc;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌入 Google 地圖</title>
<style>
.map-container {
width: 100%;
height: 400px;
border: 2px solid #ccc;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h1>我的位置</h1>
<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE_HERE"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</body>
</html>