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

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

shopify新闻
shopify新闻
2022-03-28
点赞icon 0
查看icon 843

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

将 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 密钥。

步骤:

  1. 转到 Google API 凭据页面。

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

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

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

  5. 点击保存

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

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

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



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.



特别声明:以上文章内容仅代表作者本人观点,不代表ESG跨境电商观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与ESG跨境电商联系。

搜索 放大镜
韩国平台交流群
加入
韩国平台交流群
扫码进群
欧洲多平台交流群
加入
欧洲多平台交流群
扫码进群
美国卖家交流群
加入
美国卖家交流群
扫码进群
ESG跨境专属福利分享群
加入
ESG跨境专属福利分享群
扫码进群
拉美电商交流群
加入
拉美电商交流群
扫码进群
亚马逊跨境增长交流群
加入
亚马逊跨境增长交流群
扫码进群
《开店大全-全球合集》
《开店大全-主流平台篇》
《开店大全-东南亚篇》
《CD平台自注册指南》
《开店大全-俄罗斯篇》
《韩国站内推广指南》
《韩国热销品预测》
《开店大全-日韩篇》
《开店大全-拉美篇》
《开店大全-欧洲篇》
通过ESG入驻平台,您将解锁
绿色通道,更高的入驻成功率
专业1v1客户经理服务
运营实操指导
运营提效资源福利
平台官方专属优惠
联系顾问

平台顾问

平台顾问 平台顾问

微信扫一扫
马上联系在线顾问

icon icon

小程序

微信小程序

ESG跨境小程序
手机入驻更便捷

icon icon

返回顶部