將 Google 地圖新增至 HubSpot 內容

複製地圖的嵌入程式碼，並將其插入富文字模組中，即可在 HubSpot 內容中加入互動式 Google 地圖。此方法適用於內容編輯器和支援富文字模組的範本。

開始之前

在您的 HubSpot 內容中加入 Google 地圖之前，請檢閱下列需求與注意事項。

瞭解限制與注意事項

• 嵌入式 Google 地圖由 Google 管理。顯示行為、樣式與功能取決於 Google 的嵌入設定。

取得 Google 地圖的嵌入程式碼

1. 瀏覽Google 地圖。
2. 在搜尋列中輸入地址。
3. 在地址清單中，按一下「分享」。

4. 在對話方塊中，按一下「內嵌地圖 」標籤。
5. 按一下地圖 大小下拉式功能表並選擇大小。
6. 按一下「複製 HTML」 以複製地圖的嵌入程式碼。

在內容編輯器中新增 Google 地圖

1. 導覽到您的內容：

   • 部落格：在你的 HubSpot 帳戶中，瀏覽「內容」>「部落格」。
   • 網站頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「網站頁面」。
   • 登陸頁面：登陸頁面： 在你的 HubSpot 帳戶中，瀏覽「內容」>「登陸頁面」。
2. 按一下內容的名稱。
3. 在內容編輯器中，按一下左側欄中的add 新增 圖示。
4. 按一下以展開文字 區段，然後按一下富文字 模組，並將其拖曳到位。
5. 在豐富文字工具列中，按一下進階下拉式 功能表，然後選擇原始碼。
6. 在對話方塊中，貼上地圖的嵌入程式碼，然後按一下儲存。

7. 若要執行您的變更，請按一下右上方的「發佈」 或「更新」 。

在範本中加入 Google 地圖

如果您的拖放範本或編碼範本不包含富文字模組，請在設計管理員中新增一個。發佈範本後，在內容編輯器中編輯富文字模組。

將富文字模組新增至拖放式範本

在拖放範本中加入富文字模組，以便在內容編輯器中加入 Google 地圖。進一步瞭解如何在拖放範本中使用模組。

1. 導覽到您的內容：

   • 部落格：在你的 HubSpot 帳戶中，瀏覽「內容」>「部落格」。
   • 網站頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「網站頁面」。
   • 登陸頁面：登陸頁面： 在你的 HubSpot 帳戶中，瀏覽「內容」>「登陸頁面」。
2. 按一下內容的名稱。
3. 按一下設定功能表 ，然後選擇範本。
4. 按一下Edit this template（編輯此範本）。您會被引導到「設計管理員」。
5. 按一下檢視器中的+ 新增 。
6. 在搜尋列中輸入豐富文字。

7. 按一下富文字模組 ，然後將其拖曳到範本上的位置。
8. 在右上方，按一下「發佈變更」。
9. 繼續在內容編輯器中加入 Google 地圖。

將富文字模組新增至編碼範本

將富文字模組新增至編碼範本，以便在內容編輯器中新增 Google 地圖。進一步瞭解如何在編碼範本中使用模組。

1. 導覽到您的內容：
   • 部落格：在你的 HubSpot 帳戶中，瀏覽「內容」>「部落格」。
   • 網站頁面：在你的 HubSpot 帳戶中，瀏覽「內容」>「網站頁面」。
   • 登陸頁面：登陸頁面： 在你的 HubSpot 帳戶中，瀏覽「內容」>「登陸頁面」。
2. 按一下內容的名稱。
3. 按一下設定功能表 ，然後選擇範本。
4. 按一下Edit this template（編輯此範本）。
5. 在程式碼編輯器中，新增地圖應該出現的Rich text 模組。例如

{% module
"map_embed"
path="@hubspot/rich_text"
label="Google Map" %}

6. 在右上方，按一下Publish changes（發佈變更）。
7. 繼續在富文字模組中加入 Google 地圖。