Dlaczego moja mapa nie jest renderowana na karcie jQuery?

Question

Jeśli wyrenderuję mapę na domyślnie ukrytej karcie, przejdź do tej zakładki (uczyń ją widoczną), mapa nie jest wyświetlana poprawnie. Ale kiedy odświeżam stronę, mapa jest renderowana poprawnie.

Issue

JavaScript Map Google

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 jQuery Tabs http://quickerbook.imobisoft.eu/App_Themes/js/jquery.tabify.js

HTML 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

Są dwie rzeczy, które trzeba zrobić.

1. Kiedy odsłonić kartę ukrytą, upewnij się, że prawidłowo rozmiar DIV kontenera Mapa jest w

2. Albo zaczekaj, aż DIV będzie widoczny i zwymiarowany przed utworzeniem w nim mapy, lub po zobaczeniu i rozmiarze DIV, wyślij wiadomość o zmianie rozmiaru do mapy:

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

Answer 2

Witam mam ten sam problem u maszt mieć kliknąć na przycisk Tab, a następnie należy zadzwonić initialize(); zobaczyć, co robię i ustawić tę funkcję w każdych kartach kliknij atrybut

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

Wszystko zrobiłem dodaje wysokość w stylu elementu div i mapa zaczęły pojawiać.

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

</div>