Google Map .InfoWindow 设置高度和宽度答案

【问题标题】：Google Map .InfoWindow Set Height and WidthGoogle Map .InfoWindow 设置高度和宽度
【发布时间】：2011-08-17 01:33:08
【问题描述】：

如何设置谷歌地图InfoWindow的大小和宽度？我查看了on the api page，只找到了maxWidth 方法。

编辑：我尝试了一些方法。到目前为止，这些都不起作用：

    var markerInfoWindow = new google.maps.InfoWindow({
        content: markerHTMLString,
        maxHeight: 400,  //Doesn't work
        maxWidth: 400,   //Doesn't work
        width: 300,      //Doesn't work
        height: 300      //Doesn't work
    });

也说markerHTMLString等于这个：

<div class = "MarkerPopUp"><div class = "MarkerContext">Text</div></div>

我也尝试了这三个选项（它们都不起作用）

.MarkerPopUp {
    height: 300px;
    width: 300px;
}

.MarkerPopUp {
    height: 300px;
    width: 300px;
}

.MarkerContext {
    height: 300px;
    width: 300px;
}

.MarkerContext {
    height: 300px;
    width: 300px;
}

这也行不通：

document.getElementById('MarkerPopUp')parentNode.style.overflow = '';

或者这个

document.getElementById('MarkerPopUp').parentNode.parentNode.style.overflow = '';

我几乎正在浏览我能找到的每一个线程并尝试一切。只是为了限制一些事情（尽管可能还有另一个问题）

【问题讨论】：

可以使用CSS、内联CSS或JS修改。在另一个线程中总结了一些解决方案：stackoverflow.com/a/48610923/4378314

标签： javascript css google-maps google-maps-markers

【解决方案1】：

可能是当 html 被传递到地图 api 并被解析出来时，它无法访问您的样式表声明。尝试在 MarkerPopUp 上将宽度添加为内联样式。

<div class = "MarkerPopUp" style="width: 300px;"><div class = "MarkerContext">Text</div></div>

我知道，我也讨厌内联样式，但在这种情况下它可以解决您的问题。

【讨论】：

【解决方案2】：

您可以使用包装器<div> 并添加这样的样式<div style='height: 40px; text-align: center'> 并在您的css 文件中添加css 代码.gm-style-iw { max-width: 400px!important;}；

【讨论】：

【解决方案3】：

.gm-style-iw{
    max-height: 10px;
}

为 gm-style-iw 设置样式就可以了！

【讨论】：

【解决方案4】：

在 css 中使用 !important

.MarkerPopUp {
    height: 300px !important;
    width: 300px !important;
}

【讨论】：

【解决方案5】：

试试下面的代码：

 infowindow = new google.maps.InfoWindow({
        content: "",
        maxWidth: 200 ,
        maxHeight: 400
    });

【讨论】：

不支持“maxHeight”属性。