旧 Google 地图和标签，而不是加载？

Question

下面的代码应该可以工作，但由于某些原因，第二个选项卡没有正确加载地图。

地图调整大小似乎没有正常工作，但我不明白为什么它没有加载。它周期性地加载，当它加载时，第二个选项卡也不加载页面中间的标记？

jQuery(document).ready(function($) {   


                //Default Action
                $(".tab_content").hide();
                $("ul.tabs li:first").addClass("active").show(); 
                $(".tab_content:first").show(); 

                //On Click Event
                $("ul.tabs li").click(function() {
                    $("ul.tabs li").removeClass("active");
                    $(this).addClass("active"); 
                    $(".tab_content").hide(); 
                    var activeTab = $(this).find("a").attr("href"); 
                    $(activeTab).fadeIn();  
                    return false;
                });



                function initialize()
                {


                    var latlng = new google.maps.LatLng(51.5388795,-0.057876099999930375);
                    var latlng2 = new google.maps.LatLng(51.54141329999999,-0.08070509999993192);

                    var myOptions =
                    {
                        zoom: 15,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    var myOptions2 =
                    {
                        zoom: 15,
                        center: latlng2,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    var map = new google.maps.Map(document.getElementById("mapcanvas1"), myOptions);

                    var map2 = new google.maps.Map(document.getElementById("mapcanvas"), myOptions2);

                    var myMarker = new google.maps.Marker(
                    {
                        position: latlng,
                        map: map,
                        title:"Test Title"
                   });

                    var myMarker2 = new google.maps.Marker(
                    {
                        position: latlng2,
                        map: map2,
                        title:"Test Title"
                    });


                    $(".tabs a").click(function() {
                        $(".tab_container > div").css({'display':'block'});
                        google.maps.event.trigger(map, 'resize');

                    });
                }                   

                google.maps.event.addDomListener(window, 'load', initialize);

        })

Answer 1

Google 地图 Api 已更新。检查新的 Api 版本。

Answer 2

您还需要在 "map2" 上触发调整大小事件。并且您必须在显示 div 之后执行此操作。一旦地图大小正确，您还必须设置地图的中心（否则它会出现在左上角）。

working fiddle

//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn();  
    return false;
});

$(".tabs a").click(function () {
    $(".tab_container > div").css({
        'display': 'block'
    });
    google.maps.event.trigger(map, 'resize');
    google.maps.event.trigger(map2, 'resize');
    setTimeout(function () {
        map.setCenter(latlng);
        map2.setCenter(latlng2);
    }, 100);
 });

旧 Google 地图和标签，而不是加载？

Age old Google Map & Tabs, not loadings?

tabs

google-maps