Google Map not working with XHTML Doctype (Document Type)

Question

Why on the earth there is always a chance that if we use \"Doctype\" with Google Maps, there will be a problem in showing the Google Map correctly?

In a recent case,

Answer 1

I had the same problem with Google Maps API v3 a while ago and I must say it wasn't easy to debug.

The thing here is that if you don't use DOCTYPE on your page, the page is rendered in quirks mode. Basically this allows to use styles without any additional CSS or JavaScript. In this case you could use this bit to load the map:

However, with DOCTYPE the page is rendered like the DOCTYPE says so. Setting a style such as above wouldn't work without any additional CSS as it's using percentages. The element doesn't have a size, so you end up taking 100% of nothing. So if you are using XHTML 1.0 Strict, ie.

The page renders as it should if you use pixels instead of percentages:

You could do that also in CSS.

So your options are here:

1. Leave the DOCTYPE and use pixels instead of percentages OR specify the width and the height via CSS.

2. Remove the DOCTYPE and use percentages. This is not recommended as the document should always say what DTD it should be rendered with.

You can find more info about Quirks mode from here. There's also a table which shows how different browsers react to the lack of DTD.