I've placed three examples on my site. Here are three links:
First the code exactly as given in the tutorial. This one works.
http://inkbytepress.com/static/maptut0.html
Second, same code, but with the "map_canvas" DIV contained
inside a table.
http://inkbytepress.com/static/maptut1.html
Third the same code, but with the tutorial code prefixed with
a DOCTYPE specifier.
http://inkbytepress.com/static/maptut2.html
Both 2nd and 3rd examples fail to display the map.
Many of the examples depend on the browser rendering the page in
quirks mode (without a doctype). This allows the "height: 100%" styles
to work without any additional CSS or JavaScript. There are several
threads that address this in this group both from a CSS only
perspective and by using JavaScript. The table example is also closely
related as the table has no height or width set.
Chad Killingsworth
Note by the way, the function below is not necessary on firefox. There you
can set the td width to be 100% and 0% respectivly, and if you add an
element into the 0% td, firefox automatically shrinks the other td, but IE
does not, which is, strictly speaking, the correct thing to do.
-------------------------------------------------------------------------------------------------------
function FixMapSize(doTrigger)
{
var chartSelector = document.getElementById("ChartSelector");
var mapCell = document.getElementById("mapCell");
var dataCell = document.getElementById("dataCell");
if(chartSelector.style.display == 'none') {
mapCell.style.width='100%';
dataCell.style.width='0%';
}
else {
mapCell.style.width='70%';
dataCell.style.width='30%';
}
if(doTrigger)
google.maps.event.trigger(globalMap,'resize');
}
---------------------------------------------------------------------------------------------------