Loading Google Maps in jQuery tab

Question

I have issues loading a Google Map into a jQuery tab. I tried every single solution from the internet, using suggestions from here: Google Maps V3 not loading with jQuery tabs

Problems with Google Maps API v3 + jQuery UI Tabs

http://www.digitalwks.com/blogs/diogo-raminhos/google-maps-v3-and-jquery-tabs-jquery-tabs-google-maps-bug/

Google Maps and jQuery Tabs

And so on...

But none of them worked, either I'm too noob to use them and I have no idea how to add them or are not working.

This is how the tabs are shown:

<div class="tabprice">

    <ul class="tabnavig">      
      <?php if ( $gmap_active ) { ?>
          <li><a href="#block2"><span class="big"><?php _e('Map', 'anuncios') ?></span></a></li>
      <?php } ?>
    </ul>

<?php if ( $gmap_active ) { ?>

    <!-- tab 2 -->
    <div id="block2">

        <div class="clr"></div>

            <div class="singletab">

                <?php include_once ( TEMPLATEPATH . '/includes/sidebar-gmap.php' ); ?>

            </div><!-- /singletab -->

    </div>

<?php } ?>

And here is the content of sidebar-gmap.php

http://pastebin.com/H3i4J8EN

Please guys, I beg you, help me !

Diogo Raminhos · Accepted Answer · 2012-08-07T08:21:00.560

I'm the author of one of the blogposts you refered.

For other persons with the same problem: The problem in here relies on the fact that you need to trigger the resize event when your show animation ends.

You can do that by calling google.maps.event.trigger(map, "resize"); on your show animation end callback.

So, in your case (for the link you sended) you need to:

Edit the following file:

/wp-content/themes/anuncios/includes/js/theme-scripts.js

And replace this:

/* Tab Control home main */
jQuery(function($) {
    var tabContainers = $('div.tabcontrol > div');
    tabContainers.hide().filter(':first').show();
    $('div.tabcontrol ul.tabnavig a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).fadeIn(100);
        $('div.tabcontrol ul.tabnavig a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});

With this:

/* Tab Control home main */
jQuery(function($) {
    var tabContainers = $('div.tabcontrol > div');
    tabContainers.hide().filter(':first').show();
    $('div.tabcontrol ul.tabnavig a').click(function () {
        tabContainers.hide();
        tabContainers.filter(this.hash).fadeIn(100, function(){
            if(map != undefined && map != null)
                google.maps.event.trigger(map, "resize");
        });
        $('div.tabcontrol ul.tabnavig a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});

Part 2

Find the following code:

$(tabs).click(function() {
    // hide all tabs
    $(tabContainers).hide().filter(this.hash).fadeIn(500);
    $(tabs).removeClass('selected');
    $(this).addClass('selected');
    return false;
});

And replace it with

$(tabs).click(function() {
    // hide all tabs
    $(tabContainers).hide().filter(this.hash).fadeIn(500, function(){
        if(map != undefined && map != null)
            google.maps.event.trigger(map, "resize");
    });
    $(tabs).removeClass('selected');
    $(this).addClass('selected');
    return false;
});

And your bug will be fixed, this time I downloaded and tested it locally so I'm 100% sure it will work.

Wow, thank you my friend. Obrigado ! I appreciate your help. I edited that part, but as you can see, nothing has been changed. I still left the change you proposed me in that file, but the problem persists. — demlasjr, Aug 06 '12 at 18:06
Hey I just updated my answer, check out the **Part 2**, i tested it locally and It will work ;) — Diogo Raminhos, Aug 07 '12 at 08:21
OMG, it's really works. Thank you so much man. Sadly, you don't have any "Buy me a beer" button on your websites, because for sure you deserve it. Amazing ! — demlasjr, Aug 07 '12 at 12:37

score 3 · Answer 2 · answered Aug 05 '12 at 18:49

3

Google map need a visible and fixed canvas (div) to calculate a width and height of map in order to show it correctly. If you hide your div before, you must show it first then trigger map resize google.maps.event.trigger(map, "resize"); .

In your case, call resize in calculate() function seems ideal

function codeAddress() {
   google.maps.event.trigger(map, "resize");

answered Aug 05 '12 at 18:49

James

13,571
6
61
83

I have seen that in the links I added in my question. I tried adding that but didn't worked. Can you give me please more information ? Thanks for reply btw. – demlasjr Aug 05 '12 at 18:52
Can you give me your url so I can take a look? Or just make some working example on jsfiddle... – James Aug 05 '12 at 18:53
Hey Trinh, here is the link: http://pastebin.com/XsDAGhtG I added it here because I don't want it crawled by google. Also, I included the 2 php files in my question above. I appreciate your help. – demlasjr Aug 05 '12 at 19:36

Eric Robinson · Answer 3 · 2012-08-06T02:21:56.920

I have a working copy of google maps in jquery tabs here http://jsfiddle.net/X5r8r/529/

I used some of the code from your sources that you listed above. This is the code that does it. the other stuff is just map stuff not too important

$(document).ready(function() {

    //Default Action
    $(".tab_content").css({'visibility':'hidden'  , 'position':'absolute'});
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").css({'visibility':'visible' , 'position':'static'}); 

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active"); 
        $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); 
        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).css({'visibility':'visible'  , 'position':'static'});
        return false;
    });
});

keep in mind that this works only with the div tags i've shown in jsfiddle since I check the id and class tags in the divs to activate a tab. I just change the visibility of the div to hidden or visible basically.

hope this helps you out.

Oh boy....this one looks amazing. I'm trying to implement it in my code but at this moment I'm getting just a blank page instead of the map. I can't change it completely as in your code but still playing with the code. What exactly you used to fix that issue ? Markers ? google.maps.event.addListener ? — demlasjr, Aug 05 '12 at 19:52

Loading Google Maps in jQuery tab

3 Answers3

Linked