如何将谷歌地图嵌入你的网站

在您的网站上嵌入静态 Google 地图归结为找到您的地址、复制嵌入代码并将代码粘贴到您的 HTML 中。请注意，这些地图虽然是交互式的，但有些基础。

对于更复杂的功能，例如方向和显示位置数据，您需要访问Google Maps API。

但对于简单的 Google 地图，这是最简单的方法：

1.前往谷歌地图网站。

2.搜索您想要在嵌入式地图中显示的位置。

3.单击共享。或者，您可以单击左上角的三条水平线，然后从出现的菜单中选择共享或嵌入地图。

4.单击嵌入地图以查看嵌入的预览。在这里，您可以切换地图区域、缩放比例、类型（街道地图或卫星地图）和大小（如果您愿意，可以包括自定义大小）

5.准备好嵌入时，单击复制 HTML。

6.在您的 HTML 文件中，将嵌入代码粘贴到您希望地图在页面上显示的位置。代码看起来像这样（根据您为地图选择的大小，它可能看起来有所不同：

<iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

7.保存 HTML 文件并在 Web 浏览器中打开文件以查看正在运行的地图。

这是我们的示例嵌入页面的样子：

此时，嵌入的地图是静态的——无论它显示在什么设备上或浏览器窗口的大小，它将保持 600 像素的宽度和 400 像素的高度。

然而，这并不能带来最佳的用户体验，因为许多访问者，尤其是使用移动设备的访问者，无法一次在屏幕上看到整个地图。他们需要垂直和/或水平滚动才能查看地图。

为了解决这个问题，我们可以使用一些额外的 HTML 和 CSS 使我们的嵌入式地图具有响应性。

如何用 HTML 制作响应式 Google 地图

使您的页面具有响应性已被广泛认为是最佳实践，这意味着所有元素都会重新排列并更改其大小以适合其屏幕。

默认的 Google 地图嵌入代码不是响应式的，但我们不需要在代码中做太多更改来使地图根据视口的大小放大或缩小。

要制作 HTML 格式的响应式 Google 地图，请将现有的嵌入代码放入 HTML 文档中。然后，将<iframe>元素（代表地图）包装在容器<div>中，类为google-map。

<div class="google-map">
     <iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

接下来，在您的 CSS 中，添加以下代码：

.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}

这是结果。地图将根据浏览器的大小按比例缩放。

在 CSS 中，padding-bottom属性用于设置地图的高度。您可以通过更改padding-bottom的百分比值来更改高度。

嵌入 Google 地图，最简单的方法。

通过执行上述步骤，即使是新手网站所有者也可以将基本或响应式 Google 地图放置到网站上。它们非常适合“关于”或“联系”页面，并为访问者提供更多关于您的业务的背景信息，这意味着更大的转化机会。