google map responsive

最近番本放題篇 blog 加上了店鋪 Google Map 地址,不過當我在手機上看就出事了,Google Map 並不懂 responsive(中文釋名「回應式」,十分唔好聽),所以版面被破壞了。
上網找過一下資料,原來 Google Map Embed code 用了 iframe,所以不支援 responsive,需要修改 CSS 以便支援。

看到一個外國網友有教如何修改 CSS 以便支援 Google Map 與 Bing Map.
只要在 custom.css 加上以下幾句

只要將 Google Map 的 code 加上

將 google 給你的 code 放在 div code 入面就行了。

但是他的 Code 會 ignore 了 Google code 入面的 map size,總之令它用盡畫面的濶度,但個人不太喜歡這樣,所以修改了一下。
本人不是 programmer 所以未必準確但暫時沒有問題。

不過放 Google Map 的地方要修改為

(方便我記得所以將個名改為 google-map)

在 Google Map 暫時看到的缺點是一開始載入時標示位置會在稍下的地方,但不妨礙閱讀,各位可以看一看效果。
https://www.enterpr1se.info/tag/map/