怎么在外贸网站的联系我们页面嵌入谷歌Google动态地图

在网站里面嵌入动态地图已经成为网站建设的常态，国内企业网站一般都是嵌入百度动态地图。那么外贸企业网站呢，首选就是谷歌Google地图了，来展示企业位置信息，目的就是为了提高国外用户的访问体验。

具体怎么在外贸网站的联系我们页面嵌入谷歌Google动态地图呢？

一、打开Google Maps网站

谷歌地图网址：https://www.google.com/maps/，进入网站后，在左上角输入框内输入你的英文地址。然后点击搜索。

搜索到信息后，在搜索框下方会显示详细信息和关联信息，比如：Directions（方向）、Save（保存）、Nearby（附近）、Send to phone（发送到手机）、Share（分享）等信息。如下图所示：

二、获取地图代码

点击Share按钮，可以获取到Share link （分享链接）或者 Embed map（嵌入地图）。如下图所示：

（1）Share link （分享链接）：把当前位置地图页面的URL地址分享到网站或社交网络等等；

Share link （分享链接）代码示例：

https://goo.gl/maps/VsoRM6SfEVencVX4A

（2）Embed a map（嵌入地图）：获取当前位置地图的 iframe 嵌入代码，把代码添加到网站页面中，即可直接展示当前位置的Google动态地图。

注意：Google动态地图有4种尺寸的代码，分别如下：

A-1：Small（小），代码示例：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d171633.2181121564!2d114.02695786928696!3d22.55566483134173!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3403f408d0e15291%3A0xfdee550db79280c9!2sShenzhen%2C%20Guangdong%20Province%2C%20China!5e0!3m2!1sen!2shk!4v1656421180681!5m2!1sen!2shk" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

A-2：Medium（中等），示例代码：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d171633.2181121564!2d114.02695786928696!3d22.55566483134173!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3403f408d0e15291%3A0xfdee550db79280c9!2sShenzhen%2C%20Guangdong%20Province%2C%20China!5e0!3m2!1sen!2shk!4v1656421180681!5m2!1sen!2shk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

A-3、Large（大），示例代码：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d171633.2181121564!2d114.02695786928696!3d22.55566483134173!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3403f408d0e15291%3A0xfdee550db79280c9!2sShenzhen%2C%20Guangdong%20Province%2C%20China!5e0!3m2!1sen!2shk!4v1656421180681!5m2!1sen!2shk" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

A-4、Custom size（自定义大小），比如自定义宽度1920，高度600，示例代码：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d171633.2181121564!2d114.02695786928696!3d22.55566483134173!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3403f408d0e15291%3A0xfdee550db79280c9!2sShenzhen%2C%20Guangdong%20Province%2C%20China!5e0!3m2!1sen!2shk!4v1656421180681!5m2!1sen!2shk" width="1920" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

三、添加到网站里

将获取到的Embed map的iframe嵌入代码放入网站即可。

从上述4种代码分析可得出，其实只有width="xxx"和height="xxx"的值改变了，其他的都一样。所以iframe嵌入代码的width="xxx" height="xxx"，此宽度和高度可以自定义，根据您自己的实际情况修改。比如改为：width="100%" height="500"，地图在页面中宽度就会100%显示，高度就会 500px了。