gmaps4rails mostra solo metà della mappa quando si trova la scheda. Qualche idea del perché?

Question

Mi sono guardato intorno ma non ho trovato un problema come questo.

Gmaps4rails funziona alla grande per me!

Il problema si presenta quando viene inserito in una scheda JQuery. Carica metà della mappa. In realtà sembra che mancano le immagini. Posso spostare/ridimensionare come al solito. Ma mostra solo una parte della mappa. E la parte mancante è in genere la parte sinistra/inferiore. Ma la dimensione della parte vuota varia continuamente.

Allo stesso tempo, la mano che mostra il cursore del mouse quando si passa sopra la mappa si trasforma in freccia quando si passa con il mouse su questa parte vuota (ma questa parte è ancora all'interno del contenitore Google).

Se metto il contenitore gmaps fuori dalle schede JQuery, funziona perfettamente. Qualcuno ha visto questo prima?

vista

#tabs-4 
    #gmap 
     =gmaps("map_options" => { "detect_location" => true, "auto_zoom" => false, "center_on_user" => true, "zoom" => 17},"markers" => { "data" => @json }) 

Grazie mille!

Answer 1

Vedere questo link http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

Ma ridimensionamento è chiamato in modo diverso in V3

Prova a chiamare google.maps.event.trigger(map, 'resize')

EDIT

Ogni metodo che ho trovato si riferisce a un cambiamento in JavaScript. Un altro modo in cui ho trovato http://snipplr.com/view/57003/

$('#tabs').tabs({ 
    show: function (event, ui) { 
     google.maps.event.trigger(map, 'resize'); 
    } 
}); 

Answer 2

È un problema comune. È necessario assicurarsi che la dimensione della mappa sia nota all'API (al momento pensa che abbia una dimensione zero).

Attiva l'evento di ridimensionamento quando la mappa è resa visibile. Dalla documentazione:

Gli sviluppatori dovrebbero attivare questo evento sulla mappa quando il div cambia dimensione: google.maps.event.trigger(map, 'resize')

Answer 3

Anche se questa domanda è un anno di vita, descrive esattamente quello che stavo vivendo, ma la risposta accettata non ha funzionato per me. Ecco cosa ha funzionato ...

$('#tabs').tabs({ 
    activate: function (event, ui) { 
    var center = Gmaps.map.map.getCenter(); 
    google.maps.event.trigger(map, 'resize'); 
    Gmaps.map.map.setCenter(center); 
    } 
}); 

Forse sto usando le versioni più recenti. Avevo bisogno di usare activate: invece di show: e la mappa era fuori centro una volta espansa per riempire il container, quindi la necessità del codice di centraggio. Spero che questo salvi qualcuno un po 'di tempo!

Answer 4

Ok solo una leggera modifica sulle cose pubblicate sopra. Se si utilizza la risposta selezionata, si potrebbe avere un errore nel fatto che la mappa non viene messa a fuoco correttamente. Quello che @ SteveO7 ha detto funziona bene. Ho anche dovuto regolarlo un po 'per il bootstrap. Eccolo in CoffeeScript:

$('a[data-toggle="tab"]').on 'shown', (e) -> 
    if $(e.target).attr('href') == '#tab2' 
    center = Gmaps.map.map.getCenter() 
    google.maps.event.trigger map, "resize" 
    Gmaps.map.map.setCenter(center)