【官網設計】如何在分頁嵌入 Google 地圖(Google Map)
此文章將建議你如何可以在分頁裡嵌入 Google Map。
前往銷售管道 → 品牌官網 → 官網分頁 → 新增分頁
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1k0epec.png)
選擇「插入表格」,可自行選擇你要的格數
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_pky0zf.png)
可先輸入地點名稱和地址
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_lwf6dk.png)
前往 Google 地圖(Google Map)搜尋你要的地址
點擊「分享」(Share)按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1kctvjs.png)
點擊「嵌入地圖」(Embed a map)按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1938al6.png)
可自行調整地圖大小,建議可選擇「客製化」(Custom Size),建議尺寸為:300 x 200
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_inr887.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_141l0pk.png)
點擊「複製 HTML」(COPY HTML)按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1jhhzc9.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_175tb76.png)
回到 EasyStore 分頁裡 → 在功能欄裡點擊「代碼」按鈕,切換成代碼畫面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_10eha7h.png)
可以粘貼 Google 地圖的代碼在 <br> 後面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1il04dw.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_11pb48o.png)
小貼士:你可以在代碼畫面裡找到正常畫面時的地址文字,然後在地址文字的下一個 <br> 後面貼上代碼
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_ae1vqb.png)
再度點擊「代碼」按鈕,切換成正常畫面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_6orxum.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_oyqdp2.png)
點擊儲存,完成!
步驟一:新增分頁
前往銷售管道 → 品牌官網 → 官網分頁 → 新增分頁
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1k0epec.png)
選擇「插入表格」,可自行選擇你要的格數
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_pky0zf.png)
可先輸入地點名稱和地址
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_lwf6dk.png)
步驟二:得到 Google Map 代碼
前往 Google 地圖(Google Map)搜尋你要的地址
點擊「分享」(Share)按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1kctvjs.png)
點擊「嵌入地圖」(Embed a map)按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1938al6.png)
可自行調整地圖大小,建議可選擇「客製化」(Custom Size),建議尺寸為:300 x 200
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_inr887.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_141l0pk.png)
點擊「複製 HTML」(COPY HTML)按鈕
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1jhhzc9.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_175tb76.png)
步驟三:嵌入 Google 地圖到分頁裡
回到 EasyStore 分頁裡 → 在功能欄裡點擊「代碼」按鈕,切換成代碼畫面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_10eha7h.png)
可以粘貼 Google 地圖的代碼在 <br> 後面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1il04dw.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_11pb48o.png)
小貼士:你可以在代碼畫面裡找到正常畫面時的地址文字,然後在地址文字的下一個 <br> 後面貼上代碼
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_ae1vqb.png)
再度點擊「代碼」按鈕,切換成正常畫面
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_6orxum.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_oyqdp2.png)
點擊儲存,完成!
更新時間: 12/10/2023
感謝!