Web | Coding | Blog | SOHO

[RWD]Google Map RWD 實作 – 讓地圖在各種裝置自適應

最近站長做網站時,發現嵌入 Google Map 只有特定的大小;因此在不同設備的時候,地圖的大小是會跑掉的。
因此 google map rwd 方式相當的重要。


以台北101為例,當我們點擊規劃路線底下的 分享按鈕後,
除了可以分享連結之外,還可以將地圖以 iframe 方式嵌入自己的網站:

 

在 iframe 碼左側可以選擇該 iframe 的大小,
除了「小、中、大、自訂大小」之外,如果想放到 響應式網頁,就GG了。

但是只透過這種方式嵌入自己的網站,當使用者在不同的設備瀏覽時,就會遇到地圖超出設備螢幕範圍的情況。
因此透過 RWD 自適應的方式,來讓地圖的大小針對使用者的設備畫面做大小的適應。


那麼該如何解決?

站長在這提供我的想法供大家參考:

 

首先讓我想到的是在 iframe 外包一層div,而透過該 div 的樣式來達到響應。

這時我們需要兩個步驟:

  1. 新增樣式
  2. 對 iframe 包 div

 

首先 新增新的樣式到 CSS:

//********* 程式碼參考 *******//

.iframe-rwd {
    position: relative;
    padding-bottom: 50%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.iframe-rwd iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
//********* 程式碼參考 *******//

當然以上的樣式並不是絕對的,可依照自己網站的風格、各人喜好與設計做調整。

 

最後再使用 div 標籤 將 iframe 包上:

//********* 程式碼參考 *******//
div class="iframe-rwd"
//********* 程式碼參考 *******//

如此一來便能達到 Google Map 響應囉!


如果您喜歡本站的文章,也歡迎將文章分享轉貼並註明出處;
另外還未按讚粉絲專頁的朋友,也可以動動手點擊追蹤最新的文章唷:

Comments

comments

如果您喜歡本站的文章,也歡迎將文章分享轉貼並註明出處;另外還未按讚粉絲專頁的朋友,也可以動動手點擊追蹤最新的文章唷:


© 2017 4xCode™ | Design:SC 站長