Google Map .InfoWindow Set Height and Width

问题:

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

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 markerHTMLString is equal to this:

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

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)

回答1:

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.

<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.

回答2:

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

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

回答3:

Use !important in css

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

回答4:

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;

回答5:

Try following code:

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