Google maps api v3 map not displaying completly

Question

I'm using the jquery-ui-map plugin in order to add a map to my application.

The problem is that when I load the map it is loaded only half way (see PS below).

(I discovered that if I open the Chrome Developer tool it is loading the map completely).

This is how I create the map:

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

JavaScript:
$(window).load(function() {
    var mainNode = document.getElementById("map_canvas");
    var height = $(window).height() - $("#headerDiv").height() - $("#footerDiv").height();
    var width = window.screen.width;
    mainNode.style.height = height + "px";
    mainNode.style.width = width + "px";
});

$(function() {   
    //Create map and zoom to corrent position
    $('#map_canvas').gmap().bind('init', function(event, map) {
        zoomToCurrentPosition();                                                                                                                                                                                   
    });
});

function zoomToCurrentPosition() {
    $('#map_canvas').gmap('getCurrentPosition', function(position, status) {
        if (status === 'OK') {
            var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            if (currentPositionMarker !== undefined) {
                currentPositionMarker.setMap(null);
            }

            currentPositionMarker = new google.maps.Marker({
                'position': clientPosition,
                'bounds': true
            });

            $('#map_canvas').gmap('addMarker', currentPositionMarker);

            $('#map_canvas').gmap({
                'center': clientPosition,
                'zoom': 7
            });

            $('#map_canvas').gmap('get', 'map').panTo(clientPosition);
        }
    });
}

Answer 1

The function that initializes the map will be executed on DOMReady, but the function that sets the height will be executed onload(what happens after DOMReady).

At the moment where you initialize the map the size of #map_canvas isn's set yet.

Execute the function that initializes the map after setting the height.