ansaurus

Question

Google Map not working with XHTML Doctype (Document Type)

Answer 1

+1 A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

I am using this doctype, and it seems to be working fine. It might just be your bootstrap. How are you loading Google? What errors are you getting? Display what kind of result you are getting?

CrazyEnigma 2010-07-20 14:03:54

Answer 2

A:

Your question says "if we use 'Doctype' ". Does this mean you didn't before? If you didn't before, then, essentially, you are changing the 'rules' of how a web page will be laid out. Without a proper doctype, you are in quirks mode.

Rob 2010-07-20 14:13:46

Answer 3

+5 A:

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:

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd"&gt;

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

<body onload="initialize()">
  <div id="map_canvas" style="width:500px; height:400px"></div>
</body>

You could do that also in CSS.

So your options are here:

Leave the DOCTYPE and use pixels instead of percentages OR specify the width and the height via CSS.
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.

vtorhonen 2010-07-23 11:16:46

ansaurus

tags:

views:

answers:

Google Map not working with XHTML Doctype (Document Type)

related questions