如何讓 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

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *