Google Maps, Rails и Jquery

Question

Update 7/17 решаемых

Я обновил свой код на решенные версии.

Оригинал Вопрос

Я пытаюсь показать Google Maps с помощью Gem gmaps4rails. После изучения следующих двух вопросов, которые были отправлены here & here, похоже, у Google Maps проблемы с вкладкой, которая скрывает и показывает содержимое из JQuery или Javascript и не отображает карту Google должным образом без какого-либо кода в JQuery.

Я застрял в изменении размера карты в своем javascript, может кто-то указать на мои ошибки?

Спасибо!

Мой код:

Javascript

<script> 
$(document).ready(function(){ 
    //Default Action 
    $(".gear_tab_content").hide(); //Hide all content 
    $("ul.gear_page_tabs li:first").addClass("active").show(); //Activate first tab 
    $(".gear_tab_content:first").show(); //Show first tab content 
    $(".map_container").hide(); //Hide the Google Map 

    //On Click Event 
    $("ul.gear_page_tabs li").click(function() { 
     $("ul.gear_page_tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".gear_tab_content").hide(); //Hide all tab content 
     var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active content 
    if(activeTab == '#GearLocation') { 
     $(".map_container").show();    
      Gmaps.loadMaps(); 
      Gmaps.map.addMarkers(json); 
      google.maps.event.trigger(Gmaps.map, 'resize'); 

    } 
    return false; 
    }); 

}); 
</script> 

Мой Посмотреть

<div id="GearLocation" class="gear_tab_content">  
    <%= gmaps4rails(@json) %> 
</div><!-- End GearLocation --> 

Контроллер

def show 
    @gear = Gear.find(params[:id]) 
    @storegear = @gear.user.gears.all(:order => 'created_at DESC', :limit => 6) 
    @comments = @gear.comments.all 
    @user = @gear.user 
    @store = @gear.user.store.id 
    @json = @gear.to_gmaps4rails 
    respond_to do |format| 
     format.html 
     format.json { render :json => @json } 
    end 
    end 

Маршруты

 gears GET /gears(.:format)        gears#index 
       POST /gears(.:format)        gears#create 
     new_gear GET /gears/new(.:format)       gears#new 
     edit_gear GET /gears/:id/edit(.:format)     gears#edit 
      gear GET /gears/:id(.:format)       gears#show 
       PUT /gears/:id(.:format)       gears#update 
       DELETE /gears/:id(.:format)       gears#destroy 
         /gear(.:format)        gears#index 

Еще раз спасибо.

Answer 1

Когда вы показываете/скрываете/изменяете размер карты карт google, вам нужно вызвать событие изменения размера карты. Сойу следует добавить его после того, как показывать его:

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

Я предполагаю, что Gmaps.map является экземпляром класса google.maps.Map ...