leaflet loads incomplete map
<p>I am dynamically adding a leaflet map to a div. The map is only shown partially, see picture. Once I resize the browser window the map is completely shown. Is there a way around this? I tried some initial ideas, see // in code. But none of them worked.<a href="http://i.stack.imgur.com/ThvVf.png" rel="noreferrer">incomplete map</a></p>

<pre><code>    function mapThis(lat,long,wikiTitle){       

     var div_Id= "#wikiExtract"+wikiTitle
     var map_Id= "map"+wikiTitle
     $(div_Id).append("&lt;div id='"+map_Id+"' style='width: 600px; height:
     400px'&gt;&lt;/div&gt;"); 
     var map = L.map(map_Id).setView([lat, long], 10);

     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 18,
     attribution: 'Map data &amp;copy; &lt;a
     href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
        '&lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-
          SA&lt;/a&gt;'
      }).addTo(map);


     //$("#"+map_Id).css( "height", "500px" );
     //map.invalidateSize()
     //$("#"+map_Id).hide()   
     //$("#"+map_Id).show()
     //$(window).trigger('resize');

    }
</code></pre>