标签内的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

我设法找到了解决方案。它感觉不对，但有效。基本上，初始化函数以快速间隔运行。

＆＃13;

＆＃13;

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
    })
}

＆＃13;

＆＃13;

＆＃13;