Google map centered on a marker is off-center when placed inside a (hidden) Tab

[Walt]

The Google maps javascript API V3 seems not be able to calculate the
correct size for the div when it is hidden (for example within a
hidden tab). This means that a Google map that is centered on a marker
is off-center when it is initially placed within a hidden tab.

I have been struggling for a few days to find a solution but without
luck so far. For my website I use tabbed navigation using CSS and
Javascript as described on:

http://tutorials.mezane.org/tabbed-navigation-using-css/#Introduction

The javascript looks like:

// CSS helper functions
CSS = {
// Adds a class to an element.
AddClass: function (e, c) {
if (!e.className.match(new RegExp("\\b" + c + "\\b", "i")))
e.className += (e.className ? " " : "") + c;
},

// Removes a class from an element.
RemoveClass: function (e, c) {
e.className = e.className.replace(new RegExp(" \\b" + c + "\\b|
\\b" + c + "\\b ?", "gi"), "");
}
};

// Functions for handling tabs.
Tabs = {
// Changes to the tab with the specified ID.
GoTo: function (contentId, skipReplace) {
// This variable will be true if a tab for the specified
// content ID was found.
var foundTab = false;

// Get the TOC element.
var toc = document.getElementById("toc");
if (toc) {
var lis = toc.getElementsByTagName("li");
for (var j = 0; j < lis.length; j++) {
var li = lis[j];

// Give the current tab link the class "current" and
// remove the class from any other TOC links.
var anchors = li.getElementsByTagName("a");
for (var k = 0; k < anchors.length; k++) {
if (anchors[k].hash == "#" + contentId) {
CSS.AddClass(li, "current");
foundTab = true;
break;
} else {
CSS.RemoveClass(li, "current");
}
}
}
}

// Show the content with the specified ID.
var divsToHide = [];
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];

if (div.className.match(/\bcontent\b/i)) {
if (div.id == "_" + contentId)
div.style.display = "block";
else
divsToHide.push(div);
}
}

// Hide the other content boxes.
for (var i = 0; i < divsToHide.length; i++)
divsToHide[i].style.display = "none";

// Change the address bar.
if (!skipReplace) window.location.replace("#" + contentId);
},

OnClickHandler: function (e) {
// Stop the event (to stop it from scrolling or
// making an entry in the history).
if (!e) e = window.event;
if (e.preventDefault) e.preventDefault(); else e.returnValue =
false;

// Get the name of the anchor of the link that was clicked.
Tabs.GoTo(this.hash.substring(1));
},

Init: function () {
if (!document.getElementsByTagName) return;

// Attach an onclick event to all the anchor links on the
page.
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
var a = anchors[i];
if (a.hash) a.onclick = Tabs.OnClickHandler;
}

var contentId;
if (window.location.hash) contentId =
window.location.hash.substring(1);

var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];

if (div.className.match(/\bcontent\b/i)) {
if (!contentId) contentId = div.id;
div.id = "_" + div.id;
}
}

if (contentId) Tabs.GoTo(contentId, true);
}
};

// Hook up the OnLoad event to the tab initialization function.
window.onload = Tabs.Init;

// Hide the content while waiting for the onload event to trigger.
var contentId = window.location.hash || "#Introduction";

if (document.createStyleSheet) {
var style = document.createStyleSheet();
style.addRule("div.content", "display: none;");
style.addRule("div" + contentId, "display: block;");
} else {
var head = document.getElementsByTagName("head")[0];
if (head) {
var style = document.createElement("style");
style.setAttribute("type", "text/css");
style.appendChild(document.createTextNode("div.content
{ display: none; }"));
style.appendChild(document.createTextNode("div" + contentId +
" { display: block; }"));
head.appendChild(style);
}
}


The bode to display a google within a tab is displayed like:

.....
<ol id="toc">
<li><a href="#Page_1">Page 1</a></li>
<li><a href="#Page_2">Page 2</a></li>
<li><a href="#Page_3">Page 3</a></li>
</ol>
<div id="Page_1" class="content">
<h1>Page 1</h1>
</div>

<div id="Page_2" class="content">
<h2>Page 2</h2>

<iframe scrolling="no" marginwidth="0" width="425" frameborder="0"
src="http://maps.google.com/maps/ms?
ie=UTF8&amp;lr=lang_nl&amp;hl=en&amp;msa=0&amp;msid=110570786066281977580.000477440330993ddb5d3&amp;t=h&amp;ll=44.05578,-1.221735&amp;spn=0.021589,0.036478&amp;z=14&amp;output=embed"
marginheight="0" height="350"></iframe>
<small>View <a style="color:#0000FF;text-align:left" href="http://
maps.google.com/maps/ms?
ie=UTF8&amp;lr=lang_nl&amp;hl=en&amp;msa=0&amp;msid=110570786066281977580.000477440330993ddb5d3&amp;t=h&amp;ll=44.05578,-1.221735&amp;spn=0.021589,0.036478&amp;z=14&amp;source=embed">Village
Ocelandes</a> in a larger map</small>

</div>

<div id="Page_3" class="content">
<h2>Page 3</h2>

</div>
.......

I noticed there are many people who have problems with the map being
off-center when initially being displayed within a hidden tab with the
current Google Maps API. Any help would be very much appreciated.

Thanks,
Walt

[Esa]

On Nov 2, 10:21 pm, Walt <wjschu...@gmail.com> wrote:
> The Google maps javascript API V3 seems not be able to calculate the
> correct size for the div when it is hidden

The script you are using does not hide the div but collapse. It sets
{display: none}. Size of such a div is zero.

You should trigger "resize" event after the map div is expanded.
http://code.google.com/apis/maps/documentation/v3/reference.html#Map

Consult the tab script author about suitable method to trigger the
event.