Google 地圖嵌入網站：手機自動縮放（RWD）、延遲載入、灰階效果的寫法

「聯絡我們」頁放一張 Google 地圖，客人一眼就知道店在哪裡，也可以直接點開導航。

Google 地圖本身就有「嵌入地圖」的功能，複製一段 HTML 貼上就有。但直接貼，常會遇到：

• 手機上地圖超出畫面，或電腦上只有小小一塊
• 網頁變慢，地圖明明在頁面最下面，一打開就開始下載
• 地圖的顏色和網站的配色不搭

這篇一次處理這三件事。

1. 從 Google 地圖拿到嵌入碼

在 Google 地圖搜尋店名或地址，按「分享」，切到「嵌入地圖」，複製 HTML。會得到像這樣的一段：

<iframe src="https://www.google.com/maps/embed?pb=（很長的一串）" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

• 有經營 Google 商家檔案 的店家，搜尋店名再嵌入，地圖上會標出店家，比只搜地址清楚。
• 這種嵌入方式不用申請 API 金鑰、不用綁信用卡。

問題在 width="600" height="450"：寬度固定 600 像素，手機螢幕只有 390 左右，就會超出去。

2. 讓地圖跟著版面縮放（RWD）

把 iframe 的 width、height、style 拿掉，外面包一個 <div class="zw-map">，順便加上 title：

<div class="zw-map">
	<iframe src="https://www.google.com/maps/embed?pb=（從 Google 地圖複製的網址）"
		title="正威網路行銷位置地圖" loading="lazy" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
</div>

CSS：

/* 地圖外框：寬度跟著版面，高度用比例；手機改成比較高的比例 */
.zw-map {
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #e8eeee;
}
.zw-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (max-width: 600px) {
	.zw-map { aspect-ratio: 4 / 3; }
}

• aspect-ratio：外框寬度跟著版面，高度依比例自動算。電腦用 16:9 的寬地圖；螢幕 600 像素以下改成 4:3，手機上的地圖不會扁扁一條。
• iframe 寬高 100%：地圖填滿外框。
• border-radius ＋ overflow: hidden：圓角，和網站的卡片、按鈕風格一致。不要圓角就刪掉這兩行。
• background：地圖還沒載入前，先顯示一塊淡色，不會一片空白。
• title：用螢幕閱讀器的訪客，聽得到這個框是什麼。

其他 iframe（例如 YouTube 影片）也可以用同樣的外框寫法，iframe 各個屬性的說明可以看〈iframe 嵌入網頁語法〉。

用 WordPress 的話，HTML 放進「自訂 HTML」區塊，CSS 放在佈景主題的「額外 CSS」。

3. 延遲載入：地圖在下面，就晚一點下載

loading="lazy" 讓瀏覽器等地圖快進到畫面時才下載。Google 給的嵌入碼本來就有，改寫時記得留著。

一張 Google 地圖要下載不少東西：我們測試時，一張地圖連到 Google 的請求有 31～38 個（手機少一點、電腦多一點）。地圖放在頁面最下面，大部分訪客還沒捲到，就不用先下載。

地圖如果放在一打開就看得到的位置，loading="lazy" 不會延後，照常馬上載入。

4. 灰階效果：讓地圖不要搶走網站的主色

地圖的藍色海、綠色公園、黃色道路，有時候和網站的配色很不搭。在外框多加一個 is-gray：

<div class="zw-map is-gray">

CSS 加上：

/* 灰階：讓地圖顏色不要搶走版面的主色 */
.zw-map.is-gray iframe {
	filter: grayscale(1);
}

• grayscale(1) 是全灰；想保留一點顏色，改成 grayscale(0.6) 這類 0 到 1 之間的數字。
• filter 是套在整個 iframe 上，地圖上的標記、按鈕也會一起變灰。如果客人主要是來找位置，灰階不要調太重。

書籤上的 Snazzy Maps 那種自訂配色呢？ 那是 Google 的 Maps JavaScript API 才能用的樣式，要申請 API 金鑰、綁定帳單帳戶，用量超過免費額度會收費。一般店家放一張位置地圖，用上面的嵌入碼加 CSS 就夠了。

實際測試的結果

用 Chrome 打開測試頁，第一張地圖放在頁面上方，第二張（灰階）放在頁面往下約 3200 像素的地方。

大小

• 電腦 1280 寬（內容區 1000 像素）：地圖 1000×563，16:9。
• 手機 390 寬：地圖 350×263，改成 4:3，沒有超出畫面。

延遲載入

• 一打開：只載入了第一張地圖，連到 Google 的請求電腦 38 個、手機 31 個。
• 捲到第二張附近：第二張才開始載入，請求數變成電腦 76 個、手機 62 個，差不多是兩倍。

灰階

• 第二張地圖整張變成灰色，道路、海、地名都看得清楚。電腦和手機都一樣。

延伸閱讀

• Google 商家檔案怎麼經營？讓客人在地圖上找到你
• iframe 嵌入網頁語法：基本寫法、RWD 自適應寬度與網頁無法嵌入的原因
• RWD 響應式網頁設計完整指南：打造跨裝置完美體驗

正威網路行銷是 25 年經驗的基隆網頁設計工作室，網站都是 RWD 響應式設計，網站管家年費也包含 Google 商家資料維護，台北與全台客戶都歡迎來聊聊。