发表新帖
发表新帖

Google Map not working with XHTML Doctype (Document Type)

前端 未结
关注
4 2016
感情败类
感情败类 2021-02-06 04:33

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,

相关标签:
4条回答
  • 既然无缘
    2021-02-06 05:05 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    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?

    0 讨论(0)
  • 面向向阳花
    2021-02-06 05:05

    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.

    0 讨论(0)
  • 北荒
    2021-02-06 05:06

    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 讨论(0)
  • 爱一瞬间的悲伤
    2021-02-06 05:14

    A quick solution could be to use it as follows:

    document.getElementById("google-map").style.height = $(window).height()+'px';

    before

    var map = new google.maps.Map(document.getElementById("google-map"), myMapOptions);

    It works pretty well with doctype. Tried and tested! :)

    0 讨论(0)
 看不清?
提交回复
热议问题