iT邦幫忙

2024 iThome 鐵人賽

DAY 22
0
自我挑戰組

從零開始的HTML系列 第 22

Day22 在網頁中嵌入google地圖

  • 分享至 

  • xImage
  •  

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

步驟:

  1. 生成嵌入代碼

    • 首先,前往 Google 地圖
    • 在搜尋欄中輸入你想嵌入的地點,找到該地點後點擊「分享」按鈕(通常位於地圖描述的左側)。
    • 在彈出的分享選項中,選擇「嵌入地圖」,然後你會看到一段 HTML 代碼,這就是你需要的嵌入代碼。
  2. 在 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>
  1. 使用 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>

上一篇
Day 21 CSS常用選擇器
下一篇
Day 23 在網頁中插入facebook外掛程式
系列文
從零開始的HTML30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言