Question

Update 7/17 SOLVED

I’ve updated my code to the Solved version.

Original Question

I’m trying to show Google Maps via the Gem gmaps4rails. After researching the following 2 questions that were posted here & here it seems Google Maps has issues with a tab that hides and shows content from Jquery or Javascript and will not display a Google Map properly without some code in the Jquery.

I’m stuck on resizing the map in my javascript can someone point out my errors?

Thanks!

My code:

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>

My View

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

Controller

  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

Routes

       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

Thanks Again.

Answer 1

When you show/hide/resize a google maps map you need to call the resize event of the map.
Soyou should add it after showing it:

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

I’m assuming that Gmaps.map is an instance of google.maps.Map class…