Google Map .InfoWindow Set Height and Width

Question

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)

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

Answer 2

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

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

Answer 3

Use !important in css

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

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

Answer 5

Try following code:

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