OpenLayers map inside jquery-ui dialog

I am trying to display a OpenLayers map inside a jquery dialog and I am facing the following problem: The map only displays the top left tile and the rest is blank.

Once I resize the brower window, it works as expected. Hence, I suppose it has something to do how OpenLayers retrieves the width and height of the div that hosts the map.

Here the code snippets:

The location widget that displays the map:

function LocationWidget (options)
{
    this.overlay = new OpenLayers.Layer.Vector ('Overlay',
    {
        styleMap: new OpenLayers.StyleMap (
        {
            externalGraphic: '../img/crosshair.png',
            graphicWidth: 265,
            graphicHeight: 265,
            graphicYOffset: -132,
            title: '${tooltip}'
        } )
    });

    this.map = new OpenLayers.Map (
    {
        div: options.container,
        layers: [new OpenLayers.Layer.Google ('Gmap', {numZoomLevels: 20} ),this.overlay],
    controls: []
    } );

    this.position = ('position' in options) ? options.position : undefined;
    var center = ('position' in options) ? options.position : {lon: -90.59393, lat: 14.518077};
    var lonLat = new OpenLayers.LonLat (center.lon, center.lat).transform ('EPSG:4326', this.map.getProjectionObject () );
    this.map.setCenter (lonLat, 12);
    console.log (this.position);
    if (this.position)
    {

        var point = new OpenLayers.Geometry.Point (this.position.lon, this.position.lat).transform ('EPSG:4326', this.map.getProjectionObject () );
        this.overlay.addFeatures ( [new OpenLayers.Feature.Vector (point, {} ) ] );
    }

    OpenLayers.Control.Click = OpenLayers.Class (OpenLayers.Control,
    {
        defaultHandlerOptions:
        {
            'single': true,
            'double': false,
            'pixelTolerance': 0,
            'stopSingle': false,
            'stopDouble': false
        },
        initialize: function (options)
        {
            this.handlerOptions = OpenLayers.Util.extend ( {}, this.defaultHandlerOptions);
            OpenLayers.Control.prototype.initialize.apply (this, arguments);
            this.handler = new OpenLayers.Handler.Click (this, {'click': this.trigger}, this.handlerOptions);
        }, 
        trigger: function (e)
        {
            options.click ();
        }
    } );
    var click = new OpenLayers.Control.Click ();
    this.map.addControl (click);
    click.activate ();
}

The js that initializes both the map and dialog:

var mapParams = {container: 'mapPicker', click: function () {self.event.pickLocation ();} };
if (this.event.position) mapParams.position = this.event.position;
this.locationWidget = new LocationWidget (mapParams);
$ ('#dlgLocationPicker').dialog (
{
    autoOpen: false,
    modal: true,
    height: 680,
    width: 840,
    resizable: false
} );

The embedding html:

    <div id="dlgLocationPicker">
        <div>
        <div id="mapPicker"></div>
        <span id="btnSaveLocation" class="pseudoButton">OK</span>
        </div>
    </div>

and its styles:

#mapPicker
{
    width: 600px;
    height: 400px;
    margin-bottom: 20px;
}

If I do not create the jquery-ui dialog around it, everything works fine. Could you please point to where things go haywire?