Черный экран в IE8 при загрузке нескольких карт Google (v3API) - PullRequest
Новая
       5

Черный экран в IE8 при загрузке нескольких карт Google (v3API)

0 голосов
/ 04 июля 2011

У меня есть проект, который загружает четыре карты Google на вкладках JQuery. До прошлой недели это работало отлично. Однако теперь, когда страница загружается, экран становится черным, и вы видите только некоторые элементы управления картой и некоторые случайные биты моей страницы. Если вы нажмете на одну из вкладок еще раз, то все внезапно отобразится правильно.

HTML-код для вкладок 

<ul class="tabs">
    <li><a id="tabname1" href="#tab1">LLP</a></li>
    <li><a id="tabname2" href="#tab2">Aus</a></li>
    <li><a id="tabname3" href="#tab3">Can</a></li>
    <li><a id="tabname4" href="#tab4">SA</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
        <table class="tblresults"><tbody><tr><td id="tab1address"></td><td id="tab1contact"></td><td id="tab1map"><div id="map_canvas"></div></td></tr></tbody></table>
    </div>
    <div id="tab2" class="tab_content">
        <table class="tblresults"><tbody><tr><td id="tab2address"></td><td id="tab2contact"></td><td id="tab2map"><div id="map_canvas1"></div></td></tr></tbody></table>
    </div>
    <div id="tab3" class="tab_content">
        <table class="tblresults"><tbody><tr><td id="tab3address"></td><td id="tab3contact"></td><td id="tab3map"><div id="map_canvas2"></div></td></tr></tbody></table>
    </div>
    <div id="tab4" class="tab_content">
        <table class="tblresults"><tbody><tr><td id="tab4address"></td><td id="tab4contact"></td><td id="tab4map"><div id="map_canvas3"></div></td></tr></tbody></table>
    </div>
</div>

Когда вкладки получают свое содержимое, карты инициализируются с 

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        v:3.4
    }

    mapdata = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    mapdata1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions);
    mapdata2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
    mapdata3 = new google.maps.Map(document.getElementById("map_canvas3"), myOptions);
}

Если я инициализирую только одну карту, проблема исчезнет.

Я знаю, что в приведенном выше коде показаны четыре карты с одинаковым набором местоположений и т. Д. Затем я использую GeoCoding для просмотра данных определенного адреса.

Если я инициализирую только одну карту (на любой вкладке, скрытой или видимой), то страница отображается правильно.

Кто-нибудь знает, почему это может происходить?

РЕДАКТИРОВАТЬ: Если я удаляю карту из первой вкладки (та, которая отображается по умолчанию). Поведение прекращается.

Если у меня есть только карта на первой вкладке, поведение останавливается. Проблема возникает в том случае, когда на скрытой вкладке и на видимой вкладке по умолчанию отображаются карты. Я получаю проблему.

Вот код для отображения и скрытия вкладок. 

$(document).ready(function () {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content


    //On Click Event
    $("ul.tabs li").click(function () {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
});
...