控制Google Maps InfoWindow的宽度

Question

有人知道如何设置Google地图中InfoWindow的宽度吗？InfoWindow是当您点击Google地图上的某个点时弹出的卡通气泡。我可以通过CSS控制高度，但无法弄清如何更改宽度（我希望比默认的InfoWindow更窄）。

我在API中找到了maxWidth的参考，但是我不知道该放在哪里。有什么想法吗？

- rg88

Answer 1

对于API的v3版本，InfoWindowOptions.maxWidth属性可以满足您的要求。 InfoWindow构造函数接受一个可选参数，即InfoWindoOptions对象。

var iw = new google.maps.InfoWindow({ content: some_text, maxWidth: 200 });

根据文档，"仅在调用“打开”之前设置值才会被考虑。如果要在更改内容时更改最大宽度，请先调用close、setOptions，然后再调用open。"

- fortboise

---

值得注意的是，maxWidth 不会让您将宽度缩小到某个点以下——我相信大约是200像素，这对于许多用途来说相当宽。 - Andy Giesler

这个不起作用。我建议使用下面看到的 CSS 覆盖。 - guiomie

我喜欢样式覆盖的简洁性，并且看到它起作用了，但是刚才测试上述解决方案显示它仍然对我有效，并且我可以控制infoWindow的宽度。我测试的页面是XHTML 1.0 Strict，但转到HTML5同样有效。 - fortboise

Answer 2

您可以覆盖 Google 地图的样式。

/* Just use .gm-style-iw */ 
.gm-style-iw {
  width: 300px; 
  min-height: 150px;
}

来源: https://katz.co/resizing-infowindow/

- Jaimoto

---

这个帮助我解决了一个明显是由Google Maps v3引入的问题：infoMarker的宽度以前已经自动计算过了，但最近我注意到在我的应用程序中(infoMarker)出现了溢出(自从v3以来)。为.gm-style-iw指定一个更窄的宽度解决了这个问题，非常感谢！ - Kevin Pajak

哦，而且对我来说，我不得不在CSS中的宽度后面添加"!important"才能使它起作用。 - Kevin Pajak

Answer 3

你可以像这样先添加一个div：

<div style='width:300px;margin:0 0 20px 20px;height:90px;'>

- morteza khadem