如何讓 Google Map 支援 RWD 的效果

我們在製作一些與行程或地點有關的網頁時，有時候會希望附上相關的地圖，好方便使用者了解附近的地理位置及規劃路線，這類的地圖應用以 Google Map 最常見，但 Google Map 內嵌到網頁的方式是使用 iframe，對一般的網頁也許不受影響，但如果遇到 RWD 的網頁時，就會發現 Google Map 提供的 iframe 並不會隨著設備的不同而去調整適當的比例，這時，你可以試試下面的方式。

步驟一：先設定兩組 div，class 的名稱可以隨意設定

第二步：設定 CSS

.googleMap {
	position: relative;
	padding-top: 50%;
}
#mapRWD {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}

延伸閱讀：

http://thenewcode.com/359/Create-An-Auto-Centered-Responsive-Google-Map