能否通过纯CSS在网站中嵌入Google Map？需设置哪些CSS参数？

当然可以只用纯CSS在自己的网站里嵌入Google Maps！这种方法其实就是把Google Maps的嵌入链接作为元素的背景图，完全不用依赖iframe或者JavaScript，轻量又省心。

代码示例 #

HTML部分：

<div class="map"></div>

CSS部分：

.map {
  /* 核心：使用Google Maps嵌入链接作为背景图 */
  background: url("https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4450.37576469368!2d47.31305345548099!3d56.101968401211494!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x39a74418f9829faa!2z0J_QtdGA0LXQutGA0LXRgdGC0L7Qug!5e0!3m2!1sru!2sru!4v1600523332413!5m2!1sru!2sru");
  
  /* 确保正常显示的关键参数 */
  width: 100%; /* 也可设置固定值，比如600px */
  height: 450px; /* 遵循Google Maps默认的4:3高宽比 */
  background-size: cover; /* 让背景图铺满容器，保持比例不变形 */
  background-position: center; /* 保证地图核心区域居中显示 */
  border: 0; /* 可选：移除默认边框，贴合官方嵌入样式 */
}

必须设置的CSS参数说明 #

• width 和 height：这是基础中的基础——没有明确尺寸的话，容器会直接塌陷（高度为0），地图根本无法显示。如果想要响应式效果，可以用width: 100%配合padding-top: 75%（因为4/3=0.75）来实现固定比例的自适应容器。
• background-size: cover：保证背景图完全覆盖容器，不会出现空白区域，同时维持地图的原始比例，避免拉伸变形。如果用contain的话，容器边缘可能会出现空白，体验不佳。
• background-position: center：确保地图的核心区域居中展示，不会出现偏移导致重要地点被容器边缘切掉的情况。

最后提个小局限：这种纯CSS方案只能展示静态地图，用户无法进行缩放、拖动、点击标记点等交互操作。如果需要交互功能，还是得用官方的iframe嵌入或Google Maps JavaScript API，但如果只是需要展示固定位置的地图，这个方案完全够用！

内容的提问来源于stack exchange，提问作者IMBABOT