Day22 在網頁中嵌入google地圖

2024 iThome 鐵人賽

DAY 22

自我挑戰組

從零開始的ＨＴＭＬ系列第 22 篇

16th鐵人賽

s_c_o_t_t

團隊iT 貓貓教

2024-09-02 23:25:12

135 瀏覽

分享至

在網頁製作中，嵌入 Google 地圖是一個常見的需求。這可以通過使用 Google 地圖平台提供的「嵌入地圖」功能來實現，無需編寫複雜的程式碼。

步驟：

生成嵌入代碼：
- 首先，前往 Google 地圖。
- 在搜尋欄中輸入你想嵌入的地點，找到該地點後點擊「分享」按鈕（通常位於地圖描述的左側）。
- 在彈出的分享選項中，選擇「嵌入地圖」，然後你會看到一段 HTML 代碼，這就是你需要的嵌入代碼。
在 HTML 中嵌入地圖：
- 將剛才複製的 HTML 代碼粘貼到你的 HTML 文件中適當的位置。例如，你可以將其放在一個 div 中：

   <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>

使用 CSS 自定義樣式：
- 通過 CSS 調整地圖容器的大小和樣式。例如，使用 width: 100%; 使地圖在不同裝置上自適應寬度：

   .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>