[Google Maps API v3] Tiles not filling in initial map canvas space

[Bill]

I am using the following javascript to create my map panel:
$("<div />").attr("id",
"map_canvas").css("height","100%").css("width","100%").appendTo("#resultsMap");

The results of which display a map space with tiles only showing in
the upper left hand corner of the map area until I begin dragging
around. The tiles show incorrectly and inconsistently. I have tried
using fixed css sizes as well as multiple combinations of attribute
values for height and width with no success.
Here is a link as a preview (click the map tab to view):
http://fusiondevelopers.com/test.htm


--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Esa]

API doesn't get correct information about <div> size at the moment of
map intializing. You should make API to read <div> size by triggering.

google.maps.event.trigger(map, 'resize');

after DOM is ready and the <div> is set to its final dimensions.

[Bill]

Thank you Esa. This hasn't corrected the issue. I am now running the
resize last. You can see that the map pull-downs, logo, etc. Are
stretching out correctly, but the tiling is not happening correctly...
it is inconsistent.

Here is a link again (click the map tab to view):
http://fusiondevelopers.com/test.htm

- BILL -

[Esa]

DOM operations are slow. Browser has not finished resizing at the
moment when you trigger 'resize' event. You could trigger 'resize' by
a timeOut.

Why don't you set the size of map_canvas prior to initializing map.

Try resizing your browser window and the missing tiles are loaded.
That is because window resizing triggers that very 'resize' event.

[Doc Torbin]

This definitely worked for me:

google.maps.event.trigger(this.map, 'resize');

I am currently developing something that uses a lot of expanding and
contracting DIVs and making this call to the trigger method fixed any
missing tile issues I was having.

Thanks Esa!

[Doc Torbin]