Google Maps, Rails and Jquery

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.

I'm not entirely clear on that code...could you elaborate on how I might implement that? For example ...Should the ".map_container" be the actual div or other container the map is in or should that be the map_container that is in your Gem? Should I remove my other javascript that is hiding that content? Etc....thanks I'm a newbie and I don't code javascript a lot. — DaveG, Jun 26 '12 at 22:30
I've updated my code...what am I missing? Thanks for the help. — DaveG, Jun 29 '12 at 15:36

score 1 · Accepted Answer · answered Jun 29 '12 at 15:44

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...

answered Jun 29 '12 at 15:44

iwiznia

1,669
14
21

Iwiznia, My map is not showing up at all when I try using apneadiving's code from his Gem. I'm kind of stuck.. I've updated my code to reflect how it is now. – DaveG Jun 29 '12 at 16:19
It looks like the call is gmaps4rails(@json). Then you should give the div containing the map a width and height on css. I don't know that gem so I don't how to pass the gem the width and height options to the google maps api. – iwiznia Jun 29 '12 at 18:34
That still is not working even after assigning the div a width and height. The code you suggested for the call is the code that I originally started with in my view and changed it based on apneadiving's comment. The gem is Google-Maps-for-Rails https://github.com/apneadiving/Google-Maps-for-Rails – DaveG Jun 29 '12 at 20:36

Google Maps, Rails and Jquery

1 Answers1

Linked