CODEWITHSUNDEEP
javascriptcssgoogle-maps-api-3
WolfieZero
WolfieZero

Reputation: 387

Get Google Maps take into account the CSS before setting height/width of InfoWindow

I'm trying to place some text and form elements into a Google Maps InfoWindow. Problem I'm having is once I got beyond formatting the text to adding padding, floats and such like, the InfoWindow loses the proportions/sizes and thus it's too small and produces scrollbars.

Setting the outer div within the InfoWindow to a set size with display: block; doesn't work. So it seems like it ignores the CSS I'm setting beyond font-size.

Anybody know of a way to get Google Maps take into account the CSS of elements in the InfoWindow before setting it's height/width?

Upvotes: 1

Views: 364

Answers (2)

WolfieZero
WolfieZero

Reputation: 387

After speaking to a colleague about the issue, it turns out that it was due to the CSS being nested within another class. As I had the all the type attributes set within the root of the CSS doc, they where being accounted for.

So taking the inner div CSS attributes of the InfoWindow content and putting them in the root of the CSS allowed Google Maps to work out the actual height of the InfoWindow.

Upvotes: 0

Soatl
Soatl

Reputation: 10592

The size of your InfoWindows are determined by the size of the map that they are in, so a smaller map with a big InfoWindow will cause scroll bars, and vice versa.

The InfoWindow will always be fit to the map, so if you want to make your InfoWindow smaller to include scroll bars (though i don't know why you would want to) then change the size of your map. If you want to make it bigger then do the opposite.

Upvotes: 1

Related Questions