Two failure cases for v3 tutorial example

149 views
Skip to first unread message

SteveB

unread,
Mar 16, 2010, 12:18:06 PM3/16/10
to Google Maps JavaScript API v3
Using code from the v3 tutorial at:
http://code.google.com/apis/maps/documentation/v3/introduction.html
Using Firefox 3.6, but same failures occur with Safari.

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.

Chad Killingsworth

unread,
Mar 16, 2010, 1:52:38 PM3/16/10
to Google Maps JavaScript API v3
This is more of an HTML/CSS issue and not really a maps issue.

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

Ahmet

unread,
Mar 16, 2010, 5:32:37 PM3/16/10
to google-map...@googlegroups.com
It is my understanding, well, discovery, that the google maps is "soft"
i.e. it does not impose any width or size.
So if you put the map into a div, or a table, you must force that <td> of
the table to have a size, either by explicityl giving it a width, or having
a row abowe that has a width, or by specifying a css.
I have an application where a invisible sidebar pops up in the second column
of the table in which case I need to resize the with explicitly (and trigger
the map's 'resize' event) when the sidebar pops up
Below is the part of the code
I apologize for not having a link, but my development is still on localhost.
I have not created the necessary tables on my server database yet

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');
}

---------------------------------------------------------------------------------------------------

Reply all
Reply to author
Forward
0 new messages