【官網設計】分頁嵌入 Google 地圖
此文章將建議你如何可以在分頁裡嵌入 Google 地圖。
步驟一：獲得 Google 地址代碼
- 前往 Google 地圖（Google Map）搜尋你要的地址
- 點擊「分享」（Share）按鈕
- 點擊「嵌入地圖」（Embed a map）按鈕
- 可自行調整地圖大小，建議可選擇「客製化」（Custom Size），建議尺寸為：300 x 200
- 點擊「複製 HTML」（COPY HTML）按鈕
步驟二：嵌入代碼到 EasyStore 後台
- 前往 EasyStore 後台 → 品牌官網 → 所有分頁 → 新增分頁或是點擊您希望嵌入的的分頁 → 於編輯器裡轉換成代碼頁面 （點擊 < >） → 貼上代碼
1.1 你需要在 Google 預約日曆程式碼前後加上 <div> 和 </div>，請參考以下範例
Google 地圖程式碼：
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3984.2369917814253!2d101.61423127497073!3d3.0309620969449194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc4b551b8c69c9%3A0x626a6c82106c9deb!2sSetiaWalk!5e0!3m2!1sen!2smy!4v1770275374000!5m2!1sen!2smy" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
於前後加上代碼後：
<div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3984.2369917814253!2d101.61423127497073!3d3.0309620969449194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc4b551b8c69c9%3A0x626a6c82106c9deb!2sSetiaWalk!5e0!3m2!1sen!2smy!4v1770275374000!5m2!1sen!2smy" width="400" height="300" style="border:0;" allowfullscreen=""></iframe>
</div>
- 點擊代碼頁面轉換按鈕（點擊 < >），轉換回普通頁面，確認有出現地圖頁面後 → 點擊儲存
- 如果你要以表單形式呈現，可參考以下：
3.1 製作表單，選擇「插入表格」，可自行選擇你要的格數
3.2 鼠標點擊想要置入地圖的位置 > 點擊編輯器中的 （< >）切換至程式碼畫面
3.2 這將會自動在程式碼畫面標記目前滑鼠所在的位置 > 貼入 Google 地圖代碼
3.3 點擊 （< >），轉換回普通頁面
3.4 儲存
更新時間： 06/02/2026
感謝！