Google Maps appears only in upper left corner

[Chris]

Hi Fellas,

I have been struggling a lot with this problem in the last couple of weeks. I use Google Chrome and when I switch tabs to the "Map" tab, Google Maps appears only in the upper left tile. I demonstrated my problem here http://jsbin.com/OzOhelAK/3/edit.
Calling google.maps.event.trigger(map_canvas, 'resize') periodically does not change this. Though, I noticed that if I manually change the the windows size in Chrome it appears "correctly". I have also read about answers that suggest to initiate the map after the holding div is displayed not when the it is created.
A la,

$('.main-window').show(3000, function() {
    // create the map after the div is displayed
    var mapOptions = {

But is there not a solid without such silly workaround?

I would appreciate any help I can get on this!
Thank you so much,
Chris 

[Kiril Nikolov]

Hello Chris,

The problem comes from the fact that the map initialization happens before the view is created, so incorrect height is reported the issue that you reported happens. You can use the init event of the View to create the map. I have tested it and it works as expected:

http://jsbin.com/OzOhelAK/5/edit

Regards,
Kiril Nikolov
Telerik