Home/ Questions/Q 943781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T22:29:21+00:00

Why on the earth there is always a chance that if we use Doctype

  • 0

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, this “Doctype” just took my 2 days without any productivity. What a disgusting case? This time I got a help from one of my colleague (Subhankar Bannerjee), and many thanks to him due to his timely & efficient help. He also mentioned about this same problem, which he had faced many a times.

Can anyone please tell me why this Doctype problem happens with Google Map?

Any help is greatly appreciated.

EDIT (for comment of @Balus):-
I was using the (X)HTML 1.0 Transitional Doctype, for Mozilla FF & Google Chrome browsers. I haven’t yet checked this Google Map in IE v6+, so I can’t comment on those browsers.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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">

    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:

    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.

    • 0