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):
Using
the off-left technique as described in
the jQuery UI Tabs
documentation (and in
the answers to
the two questions I linked) doesn't work at all. In fact,
the best-functioning code uses
the CSS .ui-tabs .ui-tabs-hide { display: none; } instead.
The only way to get a map to display in a tab at all is to set
the CSS width and height of #map_canvas to be absolute values. Changing
the width and height to auto or 100% causes
the map to not display at all, even if it's already been successfully rendered (using absolute width and height).
I couldn't find it documented anywhere outside of
the Maps API, but map.checkResize() won't work anymore. Instead, you have to fire a resize event by calling google.maps.event.trigger(map, 'resize').
If
the map is not initialized inside of a function bound to a tabsshow event,
the map itself is rendered correctly but
the controls are not - most are just plain missing.
So, here are my questions:
Does anyone else have experience accomplishing this same feat? If so, how did you figure out what would actually work, since
the documented tricks don't work for Maps API v3?
What about loading tab content using Ajax as per
the jQuery UI docs? I haven't had a chance to play around with it but my guess is that it's going to break Maps even more. What are
the chances of getting it to work (or is it not worth trying)?
How do I make
the map fill
the largest possible area? I'd like it to fill
the tab and adapt to page resizes, much in
the way that it's done over at maps.google.com. But, as I said, I appear to be stuck with applying only absolute width and height CSS to
the map div.
Sorry if this was long-winded but this might be
the only
documentation for Maps API v3 + jQuery tabs. Cheers!
