gmaps4rails pokazuje tylko połowę mapy, gdy iside tab. Każdy pomysł, dlaczego?

Question

Rozglądałem się, ale nie znalazłem takiego problemu.

Gmaps4rails działa doskonale dla mnie!

Problem pojawia się po wstawieniu do zakładki JQuery. Ładuje połowę mapy. Wygląda na to, że brakuje zdjęć. Mogę przesuwać/zmieniać rozmiar jak zwykle. Ale pokazuje tylko część mapy. A brakująca część to zazwyczaj lewa/dolna część. Ale rozmiar pustej części zmienia się cały czas.

W tym samym czasie dłoń, która pokazuje kursor myszy po najechaniu na mapę, zmienia się w strzałkę po najechaniu nią na tę pustą część (ale ta część jest nadal w kontenerze Google).

Po umieszczeniu kontenera gmaps poza zakładkami JQuery, działa idealnie. Czy ktoś to widział wcześniej?

widok

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

Dzięki wielkie!

Answer 1

Zobacz ten 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

Ale resize nazywa się różnie w V3

Spróbuj zadzwonić google.maps.event.trigger(map, 'resize')

EDIT

Każda metoda znalazłem odnosi się do zmian w JavaScript. Innym sposobem znalazłem http://snipplr.com/view/57003/

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

Answer 2

To powszechny problem. Musisz upewnić się, że rozmiar mapy jest znany interfejsowi API (obecnie uważa się, że ma zerowy rozmiar).

Wywołaj zdarzenie zmiany rozmiaru, gdy mapa stanie się widoczna. Od docs:

Deweloperzy powinien wywołać to zdarzenie na mapie, gdy div zmienia rozmiar: google.maps.event.trigger(map, 'resize')

Answer 3

Chociaż ta kwestia jest letni, opisuje dokładnie to, czego doświadcza, ale przyjęte rozwiązanie nie działa dla mnie. Oto, co ostatecznie zadziałało ...

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

Może używam nowszych wersji. Musiałem użyć opcji aktywuj: zamiast pokazu: mapa była poza środkiem, po rozwinięciu, aby wypełnić pojemnik, więc potrzeba kodu centrującego. Mam nadzieję, że to kogoś oszczędza!

Answer 4

Ok tylko drobna modyfikacja rzeczy zamieszczonych powyżej. Jeśli użyjesz wybranej odpowiedzi, możesz dostać błąd z nieprawidłową koncentracją mapy. To, co powiedział @ SteveO7, działa dobrze. Musiałem też trochę go dopasować do bootstrapu. Oto ona w 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)