WordPress外贸建站教程：如何轻松插入谷歌地图（无需API）

WordPress外贸建站教程：如何轻松插入谷歌地图（无需API）

WordPress Tutorial for Foreign Trade Websites: How to Easily Insert Google Maps (No API Required)

作者：悦然WordPress建站 | Author: YueRan WordPress Website Building

很多WordPress主题或插件都集成了谷歌地图的API，我们只需要填写API接口就可以调用谷歌地图。但是使用API接口需要开通，而且现在似乎要绑定信用卡才行了，否则地图不能正常显示，不是很方便。

Many WordPress themes or plugins integrate Google Maps API, where we just need to fill in the API interface to call Google Maps. However, using the API requires activation, and now it seems you need to bind a credit card, otherwise the map won't display properly, which isn't very convenient.

一般的外贸网站也不需要使用谷歌地图高级服务，如定位、距离等，只需要展示出正常的地图就可以了。所以悦然wordpress建站给大家分享一个最简单的方法，不需要申请API接口，只需要复制HTML代码就可以了。

Most foreign trade websites don't need advanced Google Maps services like positioning or distance measurement - just displaying a normal map is sufficient. Therefore, YueRan WordPress Website Building shares the simplest method that doesn't require applying for an API interface - you just need to copy HTML code.

步骤一：打开谷歌地图，设置语言

Step 1: Open Google Maps and Set Language

首先我们打开谷歌地图，把语言修改一下，做wordpress外贸建站，我们一般需要显示成英文，所以这里把语言修改为英语就可以。

First, open Google Maps and change the language. For WordPress foreign trade websites, we usually need to display it in English, so change the language to English here.

步骤二：搜索位置

Step 2: Search for Location

接下来在谷歌地图中搜索你的公司或工厂名称，找到正确的位置，如果搜索不出来可以手动调一下定位。确定后点【Share】按钮。

Next, search for your company or factory name in Google Maps to find the correct location. If it can't be found, you can manually adjust the positioning. After confirming, click the [Share] button.

步骤三：复制HMTL代码

Step 3: Copy HTML Code

接下来在弹出的窗口中，选择【Embed a map】,然后，点【COPY HTML】复制代码。

In the pop-up window that appears, select [Embed a map], then click [COPY HTML] to copy the code.

步骤四：添加HTML代码到WORDPRESS中

Step 4: Add HTML Code to WordPress

进入wordpress的文章或页面编辑状态（默认使用古腾堡编辑器），添加一个HTML模块，然后把刚刚复制的代码粘贴进来。

Enter WordPress post or page editing (using Gutenberg editor by default), add an HTML block, then paste the code you just copied.

小技巧：如果你发现插入的代码不能全宽显示地图，那么可以把代码中的【width="600"】修改为【width="100%"】试试。

Tip: If you find the inserted code doesn't display the map in full width, you can try changing [width="600"] in the code to [width="100%"].

点预览就可以看到地图了。确定没问题之后发布就可以了。

Click preview to see the map. After confirming there are no issues, you can publish it.

（此处已添加小程序，请到今日头条客户端查看）

(A mini-program has been added here, please check on the Toutiao client)