Javascript Google Map .InfoWindow 设置高度和宽度

Google Map .InfoWindow Set Height and Width

提问by Stanley Cup Phil

How do you set the size and width of a google map InfoWindow? I looked on the api pageand only found a maxWidthmethod.

你如何设置谷歌地图的大小和宽度InfoWindow？我查看了api页面，只找到了一个maxWidth方法。

Edit:I have tried a few things. So far none of these work:

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

    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
    });

Also say markerHTMLStringis equal to this:

也说markerHTMLString等于这个：

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

I have tried these three options as well (none of them worked)

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

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

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

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

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

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

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

This also will not work:

这也行不通：

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

or this

或这个

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

I am pretty much going through every thread I can find and trying everything. Just to limit a few things out (though there may be another issue)

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

回答by ryanmarc

It may be that when the html is passed into the map api and parsed out that it doesn't have access to your stylesheet delcarations. Try adding your width as inline style on MarkerPopUp.

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

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

I know, I hate inline styles too, but it could solve your issue in this case.

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

回答by fuiiii

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

Setting style for gm-style-iw does the work!

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

回答by Osama AbuSitta

Use !important in css

在 css 中使用 !important

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

回答by eildiz

You can use wrapper <div>and add style like this <div style='height: 40px; text-align: center'>and add css code .gm-style-iw { max-width: 400px!important;}in your css file;

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

回答by Neha Sharma

Try following code:

尝试以下代码：

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