控制 Google Maps InfoWindow 的宽度答案

【问题标题】：Controlling the width of a Google Maps InfoWindow控制 Google Maps InfoWindow 的宽度
【发布时间】：2010-10-02 03:54:31
【问题描述】：

有人知道如何在谷歌地图中设置信息窗口的宽度吗？信息窗口是当您单击 Google 地图中的某个点时弹出的卡通气泡。我可以通过 CSS 控制高度，但不知道如何更改宽度（我想要比默认信息窗口更薄）。

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

【问题讨论】：

【解决方案1】：

对于 API 的 v3，InfoWindowOptions.maxWidth 属性可以满足您的要求。 InfoWindow 构造函数采用 InfoWindowOptions 对象的可选参数。

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

documentation 指出，“只有在调用 open 之前设置该值时才考虑该值。要在更改内容时更改最大宽度，请调用 close、setOptions，然后再打开。”

【讨论】：

值得注意的是，maxWidth 不会让您将宽度缩小到某个点以上——我相信大约 200 像素，这对于许多用途来说都相当宽。
这不起作用。我建议使用较低的 css 覆盖。
我喜欢样式覆盖的简单性，并且看到它可以工作，但是测试刚才描述的解决方案表明它仍然对我有用，并且我可以控制 infoWindow 的宽度。我测试的页面是 XHTML 1.0 Strict，但转到 HTML5 效果同样好。

【解决方案2】：

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

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

【讨论】：

这帮助我解决了 Google Maps v3 明显引入的问题：infoMarker 的宽度之前已自动计算，但最近我注意到它在我的应用程序中溢出（自 v3 起） .为 .gm-style-iw 指定更窄的宽度解决了这个问题，谢谢！
*哦，对我来说，我必须在 CSS 的宽度上添加“！important”才能使其正常工作。

【解决方案3】：

你可以像这样首先添加 div：

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

【讨论】：