谷歌地图夜间模式嵌入iframe

Question

我想使用iframe嵌入谷歌地图的夜间模式，我看到一些代码可以使用谷歌地图API完成，但是有没有人知道是否能使用简单的iframe来嵌入地图的夜间模式？

- Suneth Kalhara

---

还可以查看具有现成样式的样式向导：https://mapstyle.withgoogle.com/ - kaskader

Answer 1

您可以使用CSS过滤器invert（）：

<iframe style="filter: invert(90%)" src="https://www.google.com/maps/embed?..."></iframe>

- GMP

---

不幸的是，这会破坏卫星视图。 - jxn

对我来说，它也搞乱了卫星视图，但是添加：height: 100vh 到样式中也可以解决问题。 - Johannes Maximilian

使用 filter: invert(90%) grayscale(1) 效果看起来非常不错。 - ciscoheat

或者保留颜色，使用以下代码：filter: invert(90%) hue-rotate(180deg) - ciscoheat

请不要使用这个，因为有官方的Google API可以完成这个任务：https://developers.google.com/maps/documentation/javascript/examples/style-array - undefined

Answer 2

没有样式设计，例如实现夜间模式所需的样式设计，在嵌入式 API 中是不可用的。正如您指出的那样，它是通过 JS API 可用的。

https://developers.google.com/maps/documentation/javascript/styling

- Rob

Answer 3

body{
  margin: 0;
}
.map{
  height: 100vh;
  filter: grayscale(100%) invert(92%) contrast(83%);
}

<iframe class="map"
        
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d63480.847337751366!2d80.211997!3d6.055892!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae173bb6932fce3%3A0x4a35b903f9c64c03!2sGalle%2C%20Sri%20Lanka!5e0!3m2!1sen!2ssg!4v1673338264656!5m2!1sen!2ssg" 
        
width="100%" height="324" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

- Siwmansala.com