Question

I’m having some problems with the resize of the Google Maps JavaScript API v3. If I set the CSS “parameters” right on load (just in the documentation) the map will show 100% height and width – no problem. But when I try to get the same result by clicking on a link it’s not showing the whole map.

I have tested both css() and toggleClass() in jQuery on this event. toggleClass() makes the map goes invisible (hides the map completely rather than makes it full screen) with this code:

// jQuery
$('#weather-map').toggleClass('test');

// CSS
#weather-map.test {
    height : 100%;
    width : 100%;
    top : 0;
    left : 0;
    position : absolute;
    z-index : 200;
}

css() works (the map goes full screen) but the image above shows how the map renders upon full screen:

$('#weather-map').css({
                       'height' : '100%',
                       'width' : '100%',
                       'top' : '0',
                       'left' : '0',
                       'position' : 'absolute',
                       'z-index' : '200'
                      });

I wonder now, why does it act like this? Have I missed something or is this method not the right one to toggle full screen of the map?

Thanks in advance.

Answer 1

It’s just because of how Google’s mapping Javascript works. It renders based on the container’s size, and doesn’t add any kind of handler to re-render in case the container gets re-sized thereafter. I imagine that in your example above, you’d have to just call the map initialization code a second time to render the map again in your resized div.