CODEWITHSUNDEEP
jquerygoogle-mapsjquery-ui-tabsgoogle-maps-api-3
Matt Ball
Matt Ball

Reputation: 359776

Problems with Google Maps API v3 + jQuery UI Tabs

There are a number of problems, which seem to be fairly well-known, when using the Google Maps API to render a map within a jQuery UI tab. I've seen SO questions posted about similar issues (here and here, for example) but the solutions there only seem to work for v2 of the Maps API. Other references I checked out are here and here, along with pretty much everything I could dig up through Googling.

I've been trying to stuff a map (using v3 of the API) into a jQuery tab with mixed results. I'm using the latest versions of everything (currently jQuery 1.3.2, jQuery UI 1.7.2, don't know about Maps).

This is the markup & javascript:

<body>
    <div id="dashtabs">
        <span class="logout">
            <a href="go away">Log out</a>
        </span>
        <!-- tabs -->
        <ul class="dashtabNavigation">
            <li><a href="#first_tab" >First</a></li>
            <li><a href="#second_tab" >Second</a></li>
            <li><a href="#map_tab" >Map</a></li>
        </ul>

        <!--  tab containers -->
        <div id="first_tab">This is my first tab</div>
        <div id="second_tab">This is my second tab</div>
        <div id="map_tab">
             <div id="map_canvas"></div>
        </div>
    </div>
</body>

and

$(document).ready(function() {
    var map = null;
    $('#dashtabs').tabs();
    $('#dashtabs').bind('tabsshow', function(event, ui) {
        if (ui.panel.id == 'map_tab' && !map)
        {
            map = initializeMap();
            google.maps.event.trigger(map, 'resize');
        }
    });
});

function initializeMap() {
    // Just some canned map for now
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map($('#map_canvas')[0], myOptions);
}

And here's what I've found that does/doesn't work (for Maps API v3):

So, here are my questions:

Sorry if this was long-winded but this might be the only documentation for Maps API v3 + jQuery tabs. Cheers!

Upvotes: 70

Views: 89398

Answers (17)

Moxet Khan
Moxet Khan

Reputation: 245

I was facing the same issue in Semantic UI, the problem was fixed while calling init(); function when a tab loads or you can bind it as well.

Upvotes: 0

yehanny
yehanny

Reputation: 101

I did what Keith says and it works for me, in my case I'm using jQuery waypoints for my tabbed navigation, for better understanding here's the code I used:

In the HEAD

<head>

<!-- Google Maps -->
<script>
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
}
window.onload = loadScript;
</script>

</head>

Inside of my tabs:

<li><a href="#MyMap" onclick="loadScript();">My Map</a></li>

Then in the DIV

<div id="map_canvas"></div>

Hope this helps someone, thanks for all!

Upvotes: 0

Wernight
Wernight

Reputation: 37600

Another solution for Maps API v3 (exp) and jQuery UI 1.10:

var pano = new google.maps.StreetViewPanorama(...);

$('#tabs').tabs({
  'activate': function(event, ui) {
    if (ui.newPanel[0].id == "maps-tabs-id") {
      pano.setVisible(true);
    }
  }
});

Upvotes: 0

arjang27
arjang27

Reputation: 241

I had the same problem and none of the answers worked for me. Maybe I didn't know how to use them in my code so I added an onclick event to the tab menu to initialize Google map and it is working. I do not know if it is a good practice though.

jQuery(document).ready(function($) {
$( '#tabs' ).tabs();
var href = $('#tabs').find('a[href="#tabs-4"]');
(href).on('click',function(){
    initialize();
})});
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map'),
      mapOptions);
}

<div id="tabs-4">
    <div id="map" style="width:580px;height:380px;">
    </div>
</div>

Upvotes: 0

Anon
Anon

Reputation: 221

Note: this answer received an invalid 3rd party edit which essentially replaced its content, something that a 3rd party editor should not do. However, the result may be more useful than the original, so both versions are now given below:

  • Original author Anon's version from 2010, after one edit by Anon

    google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() );

is suggested by http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 as a v3 substitute for v2's checkResize().

Blech - bad google, no cookie.

  • User Eugeniusz Fizdejko's complete rewrite form 2012:

For me works when adding a marker:

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

google.maps.event.addListener(map, "idle", function(){
    marker.setMap(map);
});

Upvotes: 22

Andy
Andy

Reputation: 11

I had this problem too, I was loading the maps through AJAX.

It seems the problem with percentage was to do with the panel not having any set size (the one containing the loaded markup).

Using the following code when creating the tabs helped me a lot:

$("#mainTabs").tabs({'show': function(event, ui){
  $(ui.panel).attr('style', 'width:100%;height:100%;');
  return true;
 }});

Upvotes: 1

keithxm23
keithxm23

Reputation: 1280

I got this working easily by Asynchronously loading the API and then simply calling loadScript from the <a> tag tied to the relevant tab from the onclick event like so: 

<li><a href="#tab3" onclick="loadScript();">Maps</a></li>

Upvotes: 0

jayarjo
jayarjo

Reputation: 16716

This is what you can do for Google Maps v3:

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(point); // be sure to reset the map center as well
});

Upvotes: 9

paul
paul

Reputation: 5418

This doesn't answer all your questions, but I've gotten it working and all the other answers are missing one thing -- when you redraw the map with the "resize" event, you will lose the place the map was centered on. So you also need to update the center of the map again with setCenter, if your map is centered on a position.

Also, you don't want to initialize the map every time the tab change is triggered, as that is not efficient and can result in extra geocodes. First, you need to save your centered location, which can be a static lat/long, or if geocoding, may look something like this:

var address = "21 Jump St, New York, NY"; 
var geocoder = new google.maps.Geocoder();    
var myOptions = {
  zoom: 16,      
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var center;

geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {        
    center = results[0].geometry.location;
    map.setCenter(center);
    var marker = new google.maps.Marker({
        map: map, 
        position: results[0].geometry.location
    });
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});

Then 

$("#tabs").tabs();

$('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "mapTab") {
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);   // Important to add this!      
    }
});

Where 'mapTab' is the ID of your mapTab, and 'map' is the var name for your map object.

Upvotes: 4

Andr&#233;s Sep&#250;lveda
Andr&#233;s Sep&#250;lveda

Reputation: 11

Hey guys, this code fixes the error but in IE not working. After searching and searching, I discovered that we must add the following line and everything works to perfection:

< !--[if IE]>
< style type="text/css">
.ui-tabs .ui-tabs-hide { position: relative; }
< /style>
< ![endif]-->

Upvotes: 1

memberyh
memberyh

Reputation: 137

Just redefine the css class for hidden tab:

.ui-tabs .ui-tabs-hide {
    position: absolute !important;
    left: -10000px !important;
    display:block !important;
}

Upvotes: 12

Tom Gordon
Tom Gordon

Reputation: 41

Very irritating problem but with a bit of a hackaround it's fixable. The key is to make the position relative #tabs adjust to the outerheight of each of the tabs when you select a new one. Here's how I did it:

$('#tabs').tabs({
   selected:0,
   'select': function(event, ui) {
    //this is the href of the tab you're selecting
    var currentTab = $(ui.tab).attr('href');
    //this is the height of the related tab plus a figure on the end to account for padding...
    var currentInner = $(currentTab + '.detail-tab').outerHeight() + 40;
    //now just apply the height of the current tab you're selecting to the entire position:relative #tabs ID
    $('#tabs').css('height', currentInner);
   }
  });

here's the css i used:

#tabs { position: relative; }
/*set the width here to whatever your column width is*/
.ui-tabs-panel{ position:absolute;top:0px; left:0; width:575px;}
.ui-tabs-panel.ui-tabs-hide { display:block !important; position:absolute;  left:-99999em; top:-9999em}

Upvotes: 0

Benbob
Benbob

Reputation: 14234

I load the maps after the tab has been shown.

This is hacky but it worked for me. Simply store the url of the map iframe inside the iframes rel attribute like so:

<iframe width="490" height="300" rel="http://maps.google.com/maps?f=q&amp;source=s..."></iframe>

This event will set the iframe src attribute to the url inside the rel.

        $("#tabs").tabs({
            show:function(event, ui) {
                var rel = $(ui.panel).find('iframe').attr('rel');
                $(ui.panel).find('iframe').attr('src',rel);
            }
        });

Upvotes: 4

jeffkee
jeffkee

Reputation: 5238

Actually scratch my answer above. The jQueryUI website has the answer and here it is:

Why does...

...my slider, Google Map, sIFR etc. not work when placed in a hidden (inactive) tab?

Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via display: none so that any elements inside won't report their actual width and height (0 in most browsers).

There's an easy workaround. Use the off-left technique for hiding inactive tab panels. E.g. in your style sheet replace the rule for the class selector ".ui-tabs .ui-tabs-hide" with

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

For Google maps you can also resize the map once the tab is displayed like this:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

resizeMap() will call Google Maps' checkResize() on the particular map.

Upvotes: 13

Vaughn
Vaughn

Reputation: 21

Be sure that the code that initializes your map is called BEFORE the snippet that initializes your tabs.

The only annoyances I had were that a click on the map tab made the browser jump to focus on the map and that it broke out of the default border that jQuery puts around the main tabs container. I added a return false onclick call to the map tab's a tag to handle the first and a simple border-size: 0 on the main tabs div to handle the second.

All of this worked for me.

Good luck!

Upvotes: 2

Juan arce
Juan arce

Reputation: 1

You can call

map.fitBounds(bounds)

that will do the refresh

Upvotes: 0

Dave
Dave

Reputation: 11

I've been through every forum searching for the answer to this...they all said to use the

map.checkResize()

solution....nothing seemed to work...then I...why not initialize the tab when the tab is shown so i used this

$("#servicesSlider ").tabs({        
                //event: 'mouseover'
            fx: { height: 'toggle', opacity: 'toggle'},
            show: function(event, ui) {
                  if (ui.panel.id == "service5") {
                      $(ui.panel).css("height","100%")
                    initialize()
                    }}
            });

"service5" is the id of my tab that holds my google map v3.

Hope this works for you!

Upvotes: 1

Related Questions