Loading Google Maps in jQuery tab

问题

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 !

回答1:

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.

回答2:

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");

回答3:

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.

来源：https://stackoverflow.com/questions/11819027/loading-google-maps-in-jquery-tab