Google 地图 API 密钥添加到shopify模板步骤以及Google 地图替代方案

将 Google 地图 API 密钥添加到您的模板中您可以将 Google 地图 API 密钥添加到您的模板中。步骤：PC：在 Shopify 后台中，转到在线商店>模板。找到您要编辑的模板，然

目录

• 答案
• 文章目录
• Google 地图 API 密钥添加到shopify模板步骤以及Google 地图替代方案详细回答

Google 地图 API 密钥添加到shopify模板步骤以及Google 地图替代方案详细回答

将 Google 地图 API 密钥添加到您的模板中

您可以将 Google 地图 API 密钥添加到您的模板中。

步骤：

PC：

1. 在 Shopify 后台中，转到在线商店 > 模板。

2. 找到您要编辑的模板，然后点击自定义。

1. 点击添加分区。

2. 点击地图，然后点击选择。

3. 输入地图信息。在 Google Maps API key（Google 地图 API 密钥）字段中粘贴您的 Google 地图 API 密钥。

4. 点击保存。

如果与 Google 地图平台的 API 通信时出错，地图便会替换为您在模板编辑器中指定的背景图片或颜色。

苹果系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分，轻触在线商店。

3. 轻触管理模板。

4. 找到您要编辑的模板，然后轻触自定义。

5. 轻触编辑。

1. 点击添加分区。

2. 点击地图，然后点击选择。

3. 输入地图信息。在 Google Maps API key（Google 地图 API 密钥）字段中粘贴您的 Google 地图 API 密钥。

4. 点击保存。

如果与 Google 地图平台的 API 通信时出错，地图便会替换为您在模板编辑器中指定的背景图片或颜色。

安卓系统：

1. 在 Shopify 应用中，轻触商店。

2. 在销售渠道部分，轻触在线商店。

3. 轻触管理模板。

4. 找到您要编辑的模板，然后轻触自定义。

5. 轻触编辑。

1. 点击添加分区。

2. 点击地图，然后点击选择。

3. 输入地图信息。在 Google Maps API key（Google 地图 API 密钥）字段中粘贴您的 Google 地图 API 密钥。

4. 点击保存。

如果与 Google 地图平台的 API 通信时出错，地图便会替换为您在模板编辑器中指定的背景图片或颜色。

将 API 访问权限限制为仅您的商店

Google 地图平台会提示您限制对 API 的访问。您的 API 密钥是地图的唯一标识符，可将其访问权限限制为仅您的域名，以便阻止其他人使用您的 API 密钥。

步骤：

1. 转到 Google API 凭据页面。

2. 从菜单中选择您的项目。

3. 选择您生成的 API  密钥以开始进行编辑。

4. 在应用程序限制下，点击 HTTP referrers (web sites)（HTTP 推荐人 (网站)），并输入与商店相关联的任何域名，包括 .myshopify.com 域名。例如，如果您具有自定义域名，则输入 https://myCustomDomain.com/* 和 https://shop1.myshopify.com/*。

5. 点击保存。

使用 Google 地图平台的替代方案

如果您想要在自己的网站上显示地图，但不使用 Google 地图平台的服务，则可以在页面上放置嵌入式地图。

嵌入式地图使用 HTML <iframe>，这种标签可以放置在提供富文本输入字段的任何页面或主页分区中。

Shopify商户官网原文详情：

Add your Google Maps API key to your theme

You can add your Google Maps API key to your theme.

Steps:

PC：

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme that you want to edit, and then click Customize.

1. Click Add section.

2. Click Map, and then click Select.

3. Enter the information for your map. In the Google Maps API key field, paste your Google Maps API key.

4. Click Save.

If there is ever an error in communicating with Google Maps Platform's APIS, the map is replaced by the background image or color that you have specified in the theme editor.

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme that you want to edit, and then tap Customize.

5. Tap Edit.

1. Click Add section.

2. Click Map, and then click Select.

3. Enter the information for your map. In the Google Maps API key field, paste your Google Maps API key.

4. Click Save.

If there is ever an error in communicating with Google Maps Platform's APIS, the map is replaced by the background image or color that you have specified in the theme editor.

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme that you want to edit, and then tap Customize.

5. Tap Edit.

1. Click Add section.

2. Click Map, and then click Select.

3. Enter the information for your map. In the Google Maps API key field, paste your Google Maps API key.

4. Click Save.

If there is ever an error in communicating with Google Maps Platform's APIS, the map is replaced by the background image or color that you have specified in the theme editor.

Restrict API access to only your store

Google Maps Platform prompts you to restrict access to your API. Your API key is a unique identifier for your map that prevents others from using your API key by restricting its access to only your domains.

Steps:

1. Go to the Google API credentials page.

2. Select your project from the menu.

3. Choose the API key that you generated to begin editing.

4. Under Application restrictions, click HTTP referrers (web sites) and enter any domain associated with your store, including your .myshopify.com domain. For example, if you have a custom domain, then enter both https://myCustomDomain.com/* and https://shop1.myshopify.com/*.

5. Click Save.

Alternatives to using the Google Maps Platform

If you want to display a map on your website, but not use the Google Maps Platform's services, you can place an embedded map on your page.

Embedded maps use an HTML <iframe> which can be placed into any page or homepage section that provides a rich text input field.

文章内容来源：Shopify商户官方网站