Two Leaflet maps in Two different bootstrap tabs
<p>I'm trying to put a different map using Leaflet in 2 bootstrap tabs.
My problem is when I switch to the other map, the map is not well rendered. If I zoom out, I can see the whole map in a small square in the middle of my tab's body. If I resize my browser (I'm using chrome), the map resize too and works, but the problem come back each time I'm switching between maps.</p>

<pre><code>        &lt;div class="row"&gt;
            &lt;ul class="nav nav-tabs" id="map-tab"&gt;
                &lt;li id="tab-suivi" class="active"&gt;
                    &lt;a href="#map-suivi" data-toggle="tab"&gt;Suivi&lt;/a&gt;
                &lt;/li&gt;
                &lt;li id="tab-alarm" class=""&gt;
                    &lt;a href="#map-alarm" data-toggle="tab"&gt;Alarme&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;div id="cartoTabContent" class="tab-content"&gt;
                &lt;div class="tab-pane fade active in" id="map-suivi"&gt;
                &lt;/div&gt;
                &lt;div class="tab-pane fade in" id="map-alarm"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;



    var mymap = L.map('map-suivi').setView([47.786, -3.320], 13);
    var mymapalarm = L.map('map-alarm').setView([47.786, -3.320], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
    }).addTo(mymap);


    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
    }).addTo(mymapalarm);
</code></pre>

<p>I found some post here on SO from people having similar issue with multiple maps, but none of their solutions worked for me.</p>