Google Maps API v3, jQuery , Tabs, map not showing on hidden div - google-maps

Question

This question had already been addressed multiple times, but all the solutions don't fix the problem in my case. It's as many already wrote: tabs used to display different parts of content, when loading the map in tab1 i.e. the one that opens on pageload, it displays fine.
When loading the map inside one of the other tabs, that need to be clicked, to be called, it doesn't draw the map as it is supposed to.
I already tried adding the google.maps.event.trigger(map, 'resize'); when the tab is clicked, but it doesn't do anything.
Here is my code, i am going crazy over this, have spent 10+ hours trying all suggestions !
This is the part that handles the tabs being clicked :
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
if (activeTab=='#tab4') {
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
$(activeTab).fadeIn(
); //Fade in the active content
return false;
});
});
When using an alert to see if the code is called on tab4 it works.
Here is the googlemaps code
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(<? echo $lattie; ?>, <? echo $langie; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I am calling intitalize() in the body tag, changing this to the place where i am calling the resize, doesn't solve it either.
Finally the bit that shows the div with the map-canvas :
<li id="four">
<div id="map-canvas" style="width:575px; height:500px;float:left;border:1px solid #d74c15;"></div>
</li>
As i said, i am going crazy over this, i just can't get it to work, any help would be much appreciated !

Answer 1

This is a little bit tricky in one of my projects some time ago I got stuck on the same thing while trying to hide and show the map via a link.For me the resize event handler was all I needed but make sure to add the following code after it:
UPDATE here is the complete function used.
function showMap(){
if(animating == false)
{
animating = true;
if(mapVisible == false)
{
$("#map-wrapper").animate({
height:352
},500,function(){
$("#create-event-map").fadeIn("fast");
google.maps.event.trigger(eventsMap, 'resize');
var center = new google.maps.LatLng(38,24);
eventsMap.setCenter(center);
$("#show-map-wrapper a").html("Hide map");
mapVisible = true;
animating = false;
})
}
else
{
$("#create-event-map").fadeOut("fast",function(){
$("#map-wrapper").animate({
height:0
},500);
$("#show-map-wrapper a").html("Show map");
mapVisible = false;
animating = false;
})
}
}
return false;
}
working example here: http://goo.gl/2syX8
it's in the create.event.init.js file if you want to check it out
UPDATE
In your case if you want to refresh the map you should change this code:
if (activeTab=='#tab4') {
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
$(activeTab).fadeIn(
); //Fade in the active content
With this:
if(activeTab == 'YOUR TAB ID')
{
$(activeTab).fadeIn(function(){
google.maps.event.trigger(map, 'resize');
var center = new google.maps.LatLng(<LAT>,<LNG>);
map.setCenter(center);
map.setZoom( map.getZoom() );
})
}
Store the last used lat and lng and replace them in this piece of code.