Карты Google (API) внутри вкладок

Question

Я видел, что это распространенная проблема, но я не могу найти решение для своего конкретного проекта. Открывается первая карта, но когда я нажимаю на вторую вкладку, открывается карта, но она выглядит так:

Вот ссылка http://cotdigtest5.com/contact.php. Вы можете увидеть эту проблему, когда нажимаете на вкладки.

Javascript является:

function displayMap1() { 
 
    document.getElementById('map-canvas1').style.display="block"; 
 
    initialize1(); 
 
} 
 
function initialize1() { 
 
    var myLatlng = new google.maps.LatLng(6.441648,3.419913); 
 
    var myOptions = { 
 
     zoom: 14, 
 
     center: myLatlng, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map-canvas1"), 
 
            myOptions); 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatlng, 
 
     map: map 
 
    }) 
 
} 
 

 
function displayMap2() { 
 
    document.getElementById('map-canvas2').style.display="block"; 
 
    initialize2(); 
 
} 
 
function initialize2() { 
 
    var myLatlng = new google.maps.LatLng(6.441648,3.419913); 
 
    var myOptions = { 
 
     zoom: 14, 
 
     center: myLatlng, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    var map = new google.maps.Map(document.getElementById("map-canvas2"), 
 
            myOptions); 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatlng, 
 
     map: map 
 
    }) 
 
}

<li><a href="#content-1" onclick="displayMap1()">Map 1</a></li> 
 
<li><a href="#content-2" onclick="displayMap2()">Map 2</a></li>

Answer 1

мне удалось найти решение. Он не чувствует себя хорошо, но работает. В принципе, функция инициализации выполняется с быстрым интервалом.

var refreshIntervalId; 
 

 
function displayMap1() { 
 
    document.getElementById('map-canvas1').style.display="block"; 
 
    refreshIntervalId = setInterval(function() { initialize1() }, 100); 
 
} 
 
function initialize1() { 
 
    clearInterval(refreshIntervalId); 
 
    var myLatlng = new google.maps.LatLng(6.441648,3.419913); 
 
    var myOptions = { 
 
     zoom: 14, 
 
     center: myLatlng, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map-canvas1"), 
 
            myOptions); 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatlng, 
 
     map: map 
 
    }) 
 
} 
 

 

 
function displayMap2() { 
 
    document.getElementById('map-canvas2').style.display="block"; 
 
    refreshIntervalId = setInterval(function() { initialize2() }, 100); 
 
} 
 
function initialize2() { 
 
    clearInterval(refreshIntervalId); 
 
    var myLatlng = new google.maps.LatLng(6.441648,2.419913); 
 
    var myOptions = { 
 
     zoom: 14, 
 
     center: myLatlng, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    var map = new google.maps.Map(document.getElementById("map-canvas2"), 
 
            myOptions); 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatlng, 
 
     map: map 
 
    }) 
 
}