Google 地圖 API 密鑰添加到shopify模板步驟以及Google 地圖替代方案-ESG跨境

將 Google 地圖 API 密鑰添加到您的模板中

您可以將 Google 地圖 API 密鑰添加到您的模板中。

步驟：

PC：

1. 在 Shopify 中，轉(zhuǎn)到在線商店 > 模板。

2. 找到您要編輯的模板，然后點(diǎn)擊自定義。

1. 點(diǎn)擊添加分區(qū)。

2. 點(diǎn)擊地圖，然后點(diǎn)擊選擇。

3. 輸入地圖信息。在 Google Maps API key（Google 地圖 API 密鑰）字段中粘貼您的 Google 地圖 API 密鑰。

4. 點(diǎn)擊保存。

如果與 Google 地圖平臺(tái)的 API 通信時(shí)出錯(cuò)，地圖便會(huì)替換為您在模板編輯器中指定的背景圖片或顏色。

蘋果系統(tǒng)：

1. 在 Shopify 應(yīng)用中，輕觸商店。

2. 在銷售渠道部分，輕觸在線商店。

3. 輕觸管理模板。

4. 找到您要編輯的模板，然后輕觸自定義。

5. 輕觸編輯。

1. 點(diǎn)擊添加分區(qū)。

2. 點(diǎn)擊地圖，然后點(diǎn)擊選擇。

3. 輸入地圖信息。在 Google Maps API key（Google 地圖 API 密鑰）字段中粘貼您的 Google 地圖 API 密鑰。

4. 點(diǎn)擊保存。

如果與 Google 地圖平臺(tái)的 API 通信時(shí)出錯(cuò)，地圖便會(huì)替換為您在模板編輯器中指定的背景圖片或顏色。

安卓系統(tǒng)：

1. 在 Shopify 應(yīng)用中，輕觸商店。

2. 在銷售渠道部分，輕觸。

3. 輕觸管理模板。

4. 找到您要編輯的模板，然后輕觸自定義。

5. 輕觸編輯。

1. 點(diǎn)擊添加分區(qū)。

2. 點(diǎn)擊地圖，然后點(diǎn)擊選擇。

3. 輸入地圖信息。在 Google Maps API key（Google 地圖 API 密鑰）字段中粘貼您的 Google 地圖 API 密鑰。

4. 點(diǎn)擊保存。

如果與 Google 地圖平臺(tái)的 API 通信時(shí)出錯(cuò)，地圖便會(huì)替換為您在模板編輯器中指定的背景圖片或顏色。

步驟：

1. 轉(zhuǎn)到 Google API 憑據(jù)頁面。

2. 從菜單中選擇您的項(xiàng)目。

3. 選擇您生成的 API  密鑰以開始進(jìn)行編輯。

4. 在應(yīng)用程序限制下，點(diǎn)擊 HTTP referrers (web sites)（HTTP 推薦人 (網(wǎng)站)），并輸入與商店相關(guān)聯(lián)的任何域名，包括 .my.com 域名。例如，如果您具有自定義域名，則輸入 https://myCustomDomain.com/* 和 https://shop1.myshopify.com/*。

5. 點(diǎn)擊保存。

使用 Google 地圖平臺(tái)的替代方案

如果您想要在自己的網(wǎng)站上顯示地圖，但不使用 Google 地圖平臺(tái)的服務(wù)，則可以在頁面上放置嵌入式地圖。

嵌入式地圖使用 HTML <iframe>，這種可以放置在提供富文本輸入字段的任何頁面或主頁分區(qū)中。

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.

特別聲明：以上文章內(nèi)容僅代表作者本人觀點(diǎn)，不代表ESG跨境電商觀點(diǎn)或立場。如有關(guān)于作品內(nèi)容、版權(quán)或其它問題請(qǐng)于作品發(fā)表后的30日內(nèi)與ESG跨境電商聯(lián)系。