媒体 — 地图

直接在您的网站上为购买者提供您业务的完整信息（电话号码、网站、评论、星级评等）。

Google地图通常突出显示附近的景点、公园、餐馆等。 此信息可帮助您的客户确定实际地点并计划行程。

使客户能够轻松找到您的实体商店地址，而无需打开新的浏览器窗口并离开您的网站。

如果您有一连串实体店，那么在您的网站上添加Google地图有助于以高亮显示的商品的形式提高您的品牌知名度和可信度。

转到Google Cloud Platform Console。

单击项目下拉列表，然后选择或创建要为其添加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地图。

单击右上角的​ 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。