Perché la mia mappa non viene visualizzata in una scheda jQuery?

Question

Se visualizzo una mappa in una scheda che è nascosta per impostazione predefinita, quindi accedere a tale scheda (renderla visibile), la mappa non viene visualizzata correttamente. Ma quando aggiorno la pagina, la mappa viene visualizzata correttamente.

Problema

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

HTML di schede

<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

Ci sono due cose che dovete fare:.

1. Quando riveli la scheda nascosta, assicuratevi di dimensionare correttamente il DIV container la mappa è in

2. entrambi i casi attendere che il DIV sia visibile e dimensionato prima di creare la mappa al suo interno, oppure dopo che il DIV è visibile e dimensionato, inviare un messaggio di ridimensionamento alla mappa:

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

Answer 2

Ciao ho lo stesso problema u mast di avere fatto clic sul pulsante Tab e quindi è necessario chiamare initialize(); vedere quello che sto facendo i impostare questa funzione su ogni schede clic attributo

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

Tutto quello che ho fatto si aggiunge un'altezza nello stile dell'elemento div e mappa iniziato ad apparire.

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

</div>