Size of infoWindow in google maps api v3. What is

问题:

I have need to change width and height of google maps infoWindow and I saw this topic Google Map .InfoWindow Set Height and Width. I found that the solutions from it doesn't work. Even standart infoWindow = new google.maps.InfoWindow({maxWidth: '50px'}) isn't going to work.

So what is a solution? How to change width and height of infoWindow?

回答1:

This works for me:

new google.maps.InfoWindow({ maxWidth: 320 });

Remove the ' ' and the px specifier and I believe it will work for you too.

回答2:

I always use a div inside the infowindow and it works best for me. Then you just set the size of the div via css.

Here is a link. :

Google Maps API v3: InfoWindow not sizing correctly

回答3:

The GoogleMaps-API generates the class "gm-style-iw" around the InfoWindow. So you can simply change the size by CSS, without the need of extra markup:

var infowindow = new google.maps.InfoWindow({
    content: contentString
});


.gm-style-iw {
    height: 100px;
    width: 300px;
}

回答4:

I have added and it is working

var infowindow = new google.maps.InfoWindow({
content:'<div style="width:200px; height:100px">Some text</div>'
});

回答5:

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

回答6:

I found that unless I forced the style with !important, it didn't work. So:

.gm-style-iw {
    height: 100px;
    width: 300px !important;
}

回答7:

I know this is an old question but I would like to add a responsive solution. This will adapt nicely on small devices.

@media (max-width: 413px) {
// Set gm container to screen width leaving 20px pad on each side
  .gm-style-iw {
    width: calc(100vw - 40px)!important;
    min-width: unset!important;
    max-width: unset!important;
  }

  // Next is the container Div that you create on your infoWindow function
  // on google example var contentString = '<div id="content">'+

  .your-main-container-class {
    width: calc(100vw - 80px);
    padding: 8px 0;
    margin: auto;
  }
}

Then for bigger screens just set your width as google suggest

.your-main-container-class{
  width: 316px; // Your desire width
  padding: 8px 0 8px 8px; // Play with padding if you have a custom close button
}