google maps in tab nascosta

[joker06]

Ciao,

riscontro un problema che non riesco a risolvere.
Ho una pagina divisa in tab e in una di queste tab dovrò andare ad inserire la google maps che viene creata con jquery.

Se la gmaps la metto nella prima tab quindi subito visibile non ho problemi, se la gmpas la metto in un altra tab inizialmente nascosta quando vado a visualizzarla vedo il blocco della mappa con in basso a sx il logo di google ma il resto rimane tutto grigio.

Qualcuno che ci è già passato?

[cavicchiandrea]

Io una volta avevo lo stesso problema (vado a memoria è passato parecchio tempo) avevo risolto lasciando il div maps vuoto richiamandolo al volo

[pietro09]

ho messo la mappa in una struttura a schede e, in effetti, ho questo problema. L'ho risolto in questo modo, simile al suggerimento di prima:
Per visualizzare la mappa, tipicamente si lancia una funzione initialize
Questa funzione non la lancio all'apertura della pagina ma quando rendo visibile la scheda.
Per assicurarmi che venga lanciata una sola volta uso una variabile di guardia.

A puro titolo di esempio ecco il codice che ho usato

<script type="text/javascript">
// <=!=[=C=D=A=T=A=[

var prima_volta = true;

$(document).ready(function() 
    {
        //Tabs
        $(".tab_container").each(function() {
            //$('<pre class="prettyprint"></pre>').text( $.trim( $(this).children().html() ) ).hide().appendTo( $(this) );
            $('<pre class="prettyprint"></pre>').text( $.trim( $(this).next().html() ) ).hide().appendTo( $(this) );
        });

        $(".tabs a").click(function() {
            $(this).parent().siblings().removeClass('active').end().addClass('active');
            
            $(this).parents('ul').next().children().hide().eq( $(this).parent().index() ).show();
                       
            if($(this).get(0).id == "a_map" && prima_volta)
            {
                initialize();
                prima_volta = false;
            }
            return false;
        });

        
    });



function initialize() 
{
    var myLatlng = new google.maps.LatLng(39.3084166944444, 8.53327225);
    var myOptions = 
        {
            zoom: 16,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({position: myLatlng, map: map, title:"prova marker"});

    google.maps.event.addListener(marker, 'click', function() 
        {
            infowindow.open(marker.get('map'), marker);
        }
    );

    var o = marker.getPosition();

    var messaggio = '<div style="color:red; background-color:yellow;">'
                    + format('<h3>lat: {0}<br>lng: {1}</h3>', o.lat(), o.lng());
                    + '</div>';    

    var infowindow = new google.maps.InfoWindow({ content: messaggio });

  }
// ]=]=>
</script>

[joker06]

Per motivi non riguardanti il problema che ho segnalato, mi hanno chiesto di spostare la mappa quindi il problema si è auto-risolto. Farò un test personale per risolverlo come mi avete suggerito in modo che se dovesse ricapitarmi saprò come comportarmi.
Grazie per il supporto