Google Maps not rendering completely on page?

Yes, you MUST supply a real pixel height and width of the container DIV. This is in fact detailed in the Google API.

By using something like this:

<div id="map_canvas" style="width:500px;height:500px;"></div>

instead of

<div id="map_canvas"></div>

you'll be home free !

I'm not able to reproduce the issue you are having, but it looks similar to another issue I've seen with google maps.

It looks like you might be running afoul of the way google maps determines which tiles are in view. It calculates this only once, when the map is loaded into the div the first time, and if the div grows, then not enough map will be drawn. Fortunately, this is easy to deal with. any time the container may have resized, use the checkResize() method on the map instance, and the clipping area will be recomputed from the container's current size.