Leafletjs map - map.invalidateSize is not working

Question

I use Leafletjs with google map tiles in my application. Here is my HTML markup:

Answer 1

Thanks Yehoshaphat. I did not want a full screen map. I just wanted to expand the map a little bit.

Finally, I got it working using the below code:

$.expandMap = function()    {
    if ($(".rightNav").is(':visible')){
            $(".map-wrap").animate({width:'70%'},'400');
            $(".rightNav").hide(0);
            setTimeout(function(){ map.invalidateSize()}, 400);
        }
 }

The map now expands to fill the expanded space of the outer container. It is not very smooth; but it works.