怎样在HTML中插入一个Google地图？地图嵌入指南-html教程-PHP中文网

怎样在HTML中插入一个Google地图？地图嵌入指南

星降

发布： 2025-08-04 12:55:01

原创

443人浏览过

在html中嵌入google地图需先在google地图获取嵌入代码并粘贴到网页；2. 自定义样式可通过修改iframe的width、height属性或使用css实现，响应式设计推荐使用百分比宽度和媒体查询；3. 地图无法显示可能由于网络问题、代码错误、浏览器兼容性、api密钥失效或csp限制导致；4. 确保地图在不同设备良好显示的关键是采用响应式设计，包括设置width="100%"、max-width、响应式父容器并进行多设备测试，最终通过完整测试确保地图正常加载且适配良好。

怎样在HTML中插入一个Google地图？地图嵌入指南

在HTML中嵌入Google地图，主要通过获取地图的嵌入代码，然后将其粘贴到你的网页中。简单来说，就是找到地图，复制粘贴代码。

解决方案

找到你想要嵌入的地图： 打开Google地图（https://www.php.cn/link/c7bb78561eac13b4c772f3996075b9e3），搜索你想要展示的地点或区域。
获取嵌入代码：
- 在地图界面左上角，点击菜单按钮（三条横线）。
- 选择“分享或嵌入地图”。
- 在弹出的窗口中，选择“嵌入地图”选项卡。
- 你可以选择地图的大小（小、中、大、自定义大小）。
- 复制HTML代码。
粘贴代码到HTML文件中： 打开你的HTML文件，找到你想要放置地图的位置，将刚刚复制的代码粘贴到该位置。例如：

<!DOCTYPE html>
<html>
<head>
  <title>Google 地图嵌入示例</title>
</head>
<body>

  <h1>我的地图</h1>

  <div id="map">
    <!-- 粘贴你的嵌入代码在这里 -->
    <iframe src="https://www.php.cn/link/c7bb78561eac13b4c772f3996075b9e3/embed?pb=!1m18!1m12!1m3!1d3155.8281734264756!2d-122.41941558469573!3d37.77492957975267!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808f6964d169%3A0x52ca6f5b624c8a7a!2sGolden%20Gate%20Bridge!5e0!3m2!1sen!2sus!4v1678886400000!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>

</body>
</html>

登录后复制

调整地图样式： 嵌入代码中包含一个
```
<iframe>
```
登录后复制
标签。你可以修改
```
width
```
登录后复制
和
```
height
```
登录后复制
属性来调整地图的大小。你也可以通过CSS来进一步自定义地图的样式，例如添加边框或阴影。

如何自定义Google地图嵌入代码的样式和行为？

立即学习“前端免费学习笔记（深入）”；

通过直接修改

<iframe>

登录后复制

标签的属性，你可以初步调整地图的大小。更高级的自定义需要使用Google Maps API。不过，对于简单的嵌入，调整

width

登录后复制

和

height

登录后复制

足够了。比如，你想让地图占据容器的100%宽度，可以设置

width="100%"

登录后复制

，并确保父容器有明确的宽度。要注意的是，直接修改

<iframe>

登录后复制

样式可能会受到浏览器的限制，最好将样式应用到包含

<iframe>

登录后复制

的

<div>

登录后复制

上。

一键抠图

在线一键抠图换背景

查看详情

嵌入的Google地图无法正常显示，可能是什么原因？

常见的原因包括：

网络问题： 确保你的网络连接正常。Google地图需要联网才能加载。
嵌入代码错误： 仔细检查嵌入代码是否完整，是否有遗漏或错误。
浏览器兼容性问题： 尝试使用不同的浏览器打开网页，看看是否是浏览器兼容性问题。某些旧版本的浏览器可能无法正确显示嵌入的地图。
API密钥问题： 如果你使用了Google Maps API进行更高级的自定义，请确保你的API密钥是有效的，并且已经正确配置。
CSP（Content Security Policy）限制： 你的网站可能设置了CSP，阻止了Google地图的加载。你需要调整CSP策略，允许加载来自Google地图的资源。
加载缓慢： 有时候地图加载需要一些时间，特别是当网络速度较慢时。

如何确保嵌入的Google地图在不同设备上都能良好显示？

响应式设计是关键。

使用百分比宽度： 将
```
<iframe>
```
登录后复制
的
```
width
```
登录后复制
设置为百分比（例如
```
width="100%"
```
登录后复制
），而不是固定像素值。这样，地图会根据其父容器的宽度自动调整大小。
设置最大宽度： 可以使用
```
max-width
```
登录后复制
属性来限制地图的最大宽度，防止在大型屏幕上地图过度拉伸。
使用CSS媒体查询： 可以使用CSS媒体查询来针对不同的屏幕尺寸应用不同的样式。例如，你可以为移动设备设置较小的地图高度。
确保父容器具有响应性： 地图的父容器也应该具有响应性。这意味着父容器的宽度也应该设置为百分比或使用其他响应式布局技术。
测试： 在不同的设备和浏览器上测试你的网页，确保地图在所有情况下都能良好显示。可以使用浏览器的开发者工具来模拟不同的设备。