> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 【官網設計】分頁嵌入 Google 地圖

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/6ygp55so5ywo6yoo5pa55qgi_18b9gez.png)

此文章將建議你如何可以在分頁裡嵌入 Google 地圖。

### 步驟一：獲得 Google 地址代碼

1. 前往 Google 地圖（Google Map）搜尋你要的地址

2. 點擊「分享」（Share）按鈕

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1kctvjs.png)

3. 點擊「嵌入地圖」（Embed a map）按鈕

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1938al6.png)

4. 可自行調整地圖大小，建議可選擇「客製化」（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)

5. 點擊「複製 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)

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1bj0n7f.png)

### 步驟二：嵌入代碼到 EasyStore 後台

1. 前往 EasyStore 後台 → 品牌官網 → 所有分頁 → 新增分頁或是點擊您希望嵌入的的分頁 → 於編輯器裡轉換成代碼頁面 （點擊 < >） → 貼上代碼 

1.1 **你需要在 Google 預約日曆程式碼前後加上&#160;`<div>`&#160;和&#160;`</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>​​​​​​
```

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_wo3v3s.png)


2. 點擊代碼頁面轉換按鈕（點擊 < >），轉換回普通頁面，確認有出現地圖頁面後 → 點擊儲存

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1rzxi38.png)

3. 如果你要以表單形式呈現，可參考以下：

3.1 製作表單，選擇「插入表格」，可自行選擇你要的格數

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_pky0zf.png)


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_ml1kqj.png)

3.2 鼠標點擊想要置入地圖的位置 > 點擊編輯器中的 （< >）切換至程式碼畫面


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1y76maa.png)

3.2 這將會自動在程式碼畫面標記目前滑鼠所在的位置 > 貼入 Google 地圖代碼


![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_s4d7hl.png)

3.3 點擊 （< >），轉換回普通頁面

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_iro0ed.png)

3.4 儲存