媒體 — 地圖

直接在您的網站上為購買者提供您企業的完整資訊（電話號碼、網站、評論、星級評等資訊）。

Google地圖通常會醒目提示附近的景點、公園、餐廳等。 此資訊可協助您的客戶決定實際地點並計畫行程。

讓客戶輕鬆找到實體商店的地址，無需開啟新的瀏覽器視窗並離開您的網站。

如果您有一連串實體商店，在網站上新增Google Map有助於透過反白顯示的專案來提高您的品牌知名度和可信度。

前往Google Cloud平台主控台。

按一下專案下拉式清單，然後選取或建立您要新增API金鑰的專案。

若要設定您的API認證，請依照Google Maps檔案中的指示操作。

將API金鑰複製到剪貼簿。

在​ 管理員 ​側邊欄中，移至​ Stores > Settings>Configuration。

在左側面板的​ General ​下，選擇​ Content Management。

展開 Advanced Content Tools。

{width="600" modal="regular"}

如需有關內容管理進階工具組態選項的詳細資訊，請參閱組態參考指南。

針對​ Google Maps API Key，貼上您在步驟1中複製的金鑰。

按一下​ Test Key。

如果您的金鑰發生問題，請返回Google Maps平台網站以解決問題。 然後再試一次。

在驗證您的金鑰之後，按一下​ Save Config。

開啟Page Builder工作區的頁面、區塊或動態區塊。

在Page Builder面板中，展開​ Media ​並將​ Map ​預留位置拖曳到舞台。

{width="600" modal="regular"}

如果為商店設定Google Maps平台，則會顯示商店位置的地圖。

{width="600" modal="regular"}

如果尚未為您的存放區設定Google Maps平台，則會改為顯示預留位置對應。

{width="600" modal="regular"}

將滑鼠懸停在地圖容器上以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

在​ Edit Map ​頁面的右上角，按一下​ Add Location。

輸入您要在地圖上與pin碼關聯的​ Location Name。

收集您要用於自訂位置的位置座標。

或者，您可以在​ Position ​方塊中，拖曳顯示地圖中的圖釘。

如有必要，請在新的瀏覽器視窗中移至Google Maps，並使用下列其中一種方法來取得座標：

{width="600" modal="regular"}

方法1： ​從URL複製

• 在左上角，在​ Search ​方塊中輸入地址，然後按一下​ 搜尋 （ {width="20"} ）圖示。

• 複製URL中的座標，並將其貼到記事本中。

方法2： ​從「這裡有什麼？」複製

• 以滑鼠右鍵按一下標示地圖上位置的紅色圖釘，然後在功能表中選擇​ What’s here?。

• 在顯示的標籤中，複製文字（包括座標），並將文字貼到記事本中。

在每個​ Coordinates ​方塊中輸入數字（不含逗號）。

您也可以輸入要在地圖上可用的其餘資訊。

競爭您要與地圖位置關聯的任何其他資訊：

完成時，按一下​ Save。

新位置會顯示在地圖中，並出現在​ Edit Map ​頁面上的地圖位置格線中。

{width="600" modal="regular"}

在​ 管理員 ​側邊欄中，移至​ Stores > Settings>Configuration。

在左側面板的​ General ​下，選擇​ Content Management。

展開 Advanced Content Tools。

在​ Google Maps Style ​文字方塊下，按一下建立對應樣式。

此動作會在個別的索引標籤中開啟Google Maps 平台樣式精靈，您可以在此定義Google Maps平台專案的樣式。

按一下「Create a Style」，然後依照提供的指示進行。

完成時，按一下​ Finish。

將完成的樣式匯出為JSON程式碼或URL，以便將其新增至Commerce設定。

• JSON：在產生JSON程式碼的方塊底下，按一下​ Copy JSON。

• URL：在產生之URL的方塊下方，按一下​ Copy URL。

返回您的[管理瀏覽器]索引標籤，並將產生的程式碼或URL貼到​ Google地圖樣式 ​方塊中。

如果您使用URL，請將YOUR_API_KEY預留位置取代為Google Maps API金鑰。 此URL會連結至您設定樣式的Google Map。

按一下右上角的​ Save Config。

將滑鼠懸停在地圖容器上以顯示工具方塊，然後選擇​ 設定 （ {width="20"} ）圖示。

視需要變更基本設定：

視需要修改​ Advanced ​設定：

• 若要控制新增至容器的地圖內容的水平位置，請選擇​ Alignment：

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  選項	說明
  Default	套用目前佈景主題樣式表中指定的對齊預設設定。
  Left	將內容沿地圖容器的左邊框對齊，並允許指定的任何邊框間距。
  Center	對齊地圖容器中央的內容，並允許指定的任何邊框間距。
  Right	沿著地圖容器的右邊框對齊內容，並允許指定的任何邊框間距。

• 設定套用至地圖容器所有四個側面的​ Border ​樣式：

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
  選項	說明
  Default	套用關聯樣式表所指定的預設邊框樣式。
  None	未提供任何容器框線的可見指示。
  Dotted	容器邊框會以虛線顯示。
  Dashed	容器邊框會以虛線顯示。
  Solid	容器邊框會以實線顯示。
  Double	容器邊框會以雙線顯示。
  Groove	容器框線會顯示為槽線。
  Ridge	容器框線會顯示為脊線。
  Inset	容器框線會顯示為內嵌線。
  Outset	容器邊框會顯示為外線。

• 如果您設定了None以外的框線樣式，請完成框線顯示選項：

  {width="600" modal="regular"}

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  選項	說明
  Border Color	選擇色票、按一下檢色器，或輸入有效的顏色名稱或相等的十六進位值，以指定顏色。
  Border Width	輸入邊框線條寬度的畫素數。
  Border Radius	輸入畫素數目，以定義用來將邊框每個角落倒圓角的半徑大小。

• （選擇性）從目前的樣式表中指定要套用至對應容器的​ CSS classes ​名稱。

  以空格分隔多個類別名稱。

• 輸入​ Margins and Padding ​的值（以畫素為單位），以指定地圖容器的外部邊界和內邊距。

  在地圖容器圖表中輸入每個對應的值。

  table 0-row-2 1-row-2 2-row-2 layout-auto
  容器區域	說明
  Margins	套用至容器所有側邊外部邊緣的空白空間量。
  Padding	套用至容器所有邊內側邊緣的空白空間量。

  note note
  NOTE
  邊框間距不適用於「地圖」內容型別。

完成後，按一下​ Save ​套用設定並返回Page Builder工作區。

在​ 管理員 ​側邊欄中，移至​ Stores > Settings>Configuration。

在左側面板的​ General ​下，選擇​ Content Management。

展開 Advanced Content Tools。

視需要更新格線選項：

• 針對​ Default Column Grid Size，輸入格線預設大小的新值。

• 針對​ Maximum Column Grid Size，輸入預設格點大小上限的新值。

{width="600" modal="regular"}

完成時，按一下​ Save Config。