Google Map shows only partially

Found the issue. I was hiding the block, GMaps was in

<div id="step2" style="display:none">

But it seems a block containing the map may not be hidden, when GMaps loads.

So I changed it like this

<div id="step2">

and everything worked. But as I just like to show "step1" in the beginning, I do a

$('#step2').hide();

once the map is loaded.

It's realy strange behaviour of Chrome and FF, but I'm glad it works with this workaround. Thanks for your help.

I've found that any hide and show operations which are performed on div with google map by using css 'display' property (or jQuery hide() and show() function) causing partially view of the map.

Instead of 'display' I use 'visibility' (hidden, visible) and everything is fine. What I expected was to show the map on a popup. However 'visibility' takes space even when its attribute is set to hidden, but since I use 'z-index' for the popup it does not affect a base layer (0 z-index).

Regards Bronek

Try google.maps.event.trigger(map, "resize");

This may help...

Google Maps not rendering completely on page?