Google maps doesn't load in Jquery tabs

Question

Its a very old question and I've tried all solutions available to go pass it without any success. I tried all the accepted answers without any success which makes me believe that I must be doing something wrong.

Below are the details:

gem gmaps4rails 1.5.6 (https://github.com/apneadiving/Google-Maps-for-Rails)
Rails 3.2.19
Ruby 1.9.3
Jquery 1.10

Code looks something like this:

    // tab code example
        <li><a href="#tab1">Tab1</a></li>
        <li><a href="#tab2">Tab2</a></li>
        <li><a href="#tab3">Tab3</a></li>
        <li><a href="#tab4">Tab4</a></li>
        <li><a href="#tab5">Tab5</a></li>


        <div id="tab1" class="tab_content">
            <h2>Map1</h2>
        </div>
        <div id="tab2" class="tab_content">
            <h2>Map2</h2>
        </div>
        <div id="tab3" class="tab_content">
            <h2>Map3</h2>
        </div>
        <div id="tab4" class="tab_content">
            <h2>Map4</h2>
        </div>
         <div id="tab5" class="tab_content">
            <h2>Map5</h2>
        </div>
// tab example ends

I've already tried these answers:

Loading Google Maps in jQuery tab
Google Maps Not Working in jQuery Tabs
Google Map in Bootstrap Tab
Google Maps and jQuery Tabs
Google Maps unable to fully load in jquery nav-tab
Google Maps, Rails and Jquery
Google Maps and jQuery Tabs

suggest you create a demo that replicates your problem. Did you set the map container dimensions? Using the maps resize method should work as does approach of changing the content to display off screen. — charlietfl, Sep 15 '14 at 14:26
Sorry guys..Yeah i saw the formatting going completely wrong — dhyan, Sep 15 '14 at 14:33
@charlietfl :- Yeah tried doing that and then call resize method. Didn't work for me — dhyan, Sep 15 '14 at 14:48
Well nobody can help if you don't show the code you tried that isn't working. Create a demo in jsfiddle.net — charlietfl, Sep 15 '14 at 14:55

jam · Answer 1 · 2014-11-19T10:04:36.407

0

[OP's solution converted to answer below]

Finally what worked for me was including this in view specific js, so in my view.js i have :-

 $( "#tabs" ).bind( "click", function() {
        Gmaps.loadMaps();
    });

In view.html.erb :-

<%= gmaps(..)%>

edited Nov 19 '14 at 10:04

answered Oct 29 '14 at 09:16

jam

3,640
5
34
50

Google maps doesn't load in Jquery tabs

1 Answers1