Tại sao bản đồ của tôi không hiển thị trong tab jQuery?

Question

Nếu tôi hiển thị bản đồ trong tab bị ẩn theo mặc định, sau đó điều hướng đến tab đó (hiển thị), bản đồ sẽ không hiển thị chính xác. Nhưng khi tôi làm mới trang, bản đồ sẽ hiển thị chính xác.

Issue

Javascript của Google Maps

var map; 
function initialize() { 
    var latlng = new google.maps.LatLng(serLat, serLang); // - 34.397, 150.644); 
    var myOptions = { 
     zoom: 10, 

     width: 1270, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map"), myOptions); 
    var marker = new google.maps.Marker 
    (
     { 
      position: new google.maps.LatLng(serLat, serLang), 
      map: map, 
      width: 1270, 
      title: 'Click' 
     } 
    ); 
    //  var infowindow = new google.maps.InfoWindow({ 
    //   content: cntnt 
    //  }); 
    //  google.maps.event.addListener(marker, 'click', function() { 
    //   // Calling the open method of the infoWindow 
    //   infowindow.open(map, marker); 
    //  }); 
} 
window.onload = initialize; 

URL của Jquery Tabs http://quickerbook.imobisoft.eu/App_Themes/js/jquery.tabify.js

HTML của Tabs

<ul id="tabs-hd"> 
    <li class="active"><a href="#tab1">Tab One</a></li> 
    <li><a href="#tab2">Tab Two</a></li> 
    <li><a href="#tab3">Tab for Google Map</a></li> 
</ul> 

<div id="tab1">Content for tab one...</div> 
<div id="tab2">Content for tab two...</div> 
<div id="tab3"><div id="map"></div></div> 

Answer 1

Có hai điều bạn cần làm:.

1. Khi bạn bộc lộ tab ẩn, chắc chắn rằng bạn kích thước đúng DIV chứa bản đồ là trong

2. Hoặc đợi cho đến khi DIV đó hiển thị và có kích thước trước khi tạo bản đồ trong đó, hoặc sau khi DIV hiển thị và có kích thước, hãy gửi tin nhắn thay đổi kích thước tới bản đồ:

google.maps.event.trigger(map, 'resize');

Answer 2

hi i có cùng một vấn đề u mast đã nhấp vào nút Tab của bạn và sau đó bạn phải gọi initialize(); xem những gì tôi đang làm tôi đặt chức năng này trên mỗi tab nhấp vào thuộc tính

function ChangeTabs(e){ 
    $('#tabs-1').hide(); 
    $('#tabs-2').hide(); 
    $('#tabs-3').hide(); 
    $('#tabs-4').hide(); 

    var a = $.browser; 
    if (a.msie) 
    { 
     $(e.srcElement.hash).show(); 
     if(e.srcElement.hash=='#tabs-3') 
      initialize(); 
    } 
    else 
    { 
     $(e.currentTarget.hash).show(); 
     if(e.currentTarget.hash=="#tabs-3") 
      initialize(); 
    } 

Answer 3

Tất cả những gì tôi đã làm được thêm chiều cao theo kiểu của phần tử div và bản đồ bắt đầu xuất hiện.

<div class="event-details" style="height:500px;" id="map_canvas"> 

</div>