Google Maps API V3: Infowindow Not Sizing Correctly

Google Maps (V3) InfoWindow not resizing properly

Looks like the definition is applied after the Google Maps API calculates the size of the infoWindow. When I remove #map from the CSS declaration it sizes properly.

<style>
    div#pop {
    border:     1px solid red;
    height:     80px;
    width:      275px;
    }
</style>

Size of infoWindow in google maps api v3. What is the right solution?

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.

Google maps Infowindow doesnt size as expected

This was due to global img styling. To revert it I just added

.gm-style img { max-width: none; }

Kudos to this answer.

How do I get a google-maps InfoWindow to resize to fit the content that is placed inside of it?

I found that explicitly setting the "height" css style of the div used as the InfoWindow content ("#info-window" for me) seems to cause google's code to size the info window correctly.

In my case, I just used jQuery to calculate and set the 'height' style after changing the div contents:

$infoWindowContent.height($infoWindowContent.height());

I still haven't figured out what causes google to size the window incorrectly in the first place... Dynamically changing the content isn't the cause since (1) static content had the same problem, and (2) Google was changing the window size if/when I dynamically changed the content, they just were just weren't changing it enough. Somehow, Google was just miscalculating the size. However, explicitly setting the css height seems to get around that.

---

Related Topics