複数のマップを1つのカートに入れる

Question

複数のCartoマップを同じHTMLに表示する必要があります。最初のマップで問題はありませんが、2番目のマップは正しく表示されません。私はそれを理解していない。それを行う正しい方法は何ですか？

var mapDimarts; 
var mapDimecres; 

function servmet(){ 
    mapDimarts = new L.Map('cartodbDimarts', { 
     center: [41.75, 2.18], 
     zoom: 7 
    }); 

    mapDimecres = new L.Map('cartodbDimecres', { 
     center: [41.75, 2.18], 
     zoom: 7 
    }); 

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { 
    attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>' 
}).addTo(mapDimarts); 

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { 
    attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>' 
}).addTo(mapDimecres); 

cartodb.createLayer(mapDimarts, 'https://pixelius.carto.com/api/v2/viz/1f0fd8ee-9c22-4571-8b25-ef549d716c8f/viz.json') 
    .addTo(mapDimarts) 
    .on('error', function(err) { 
    alert("some error occurred: " + err); 
}); 

cartodb.createLayer(mapDimecres, 'https://pixelius.carto.com/api/v2/viz/6f8ec189-c208-4c5f-9aa2-6cc9ebbc52ac/viz.json') 
    .addTo(mapDimecres) 
    .on('error', function(err) { 
    alert("some error occurred: " + err); 
}); 

} 

window.onload = servmet; 

Answer 1

マップコンテナが表示されていないときのマップが初期化されます。ここでは次のコードで私のhtmlのプロトタイプhttp://pixelius.es/labs/servmetです。マップは存在しますが、サイズが正しくありません。

私は同じ問題を抱えている

function predicDia(e,a){ 
    mapDimecres.invalidateSize(true);