嵌入式谷歌地图的 W3C 验证错误

【问题标题】：W3C validation errors with embedded google map嵌入式谷歌地图的 W3C 验证错误
【发布时间】：2016-05-11 16:20:16
【问题描述】：

我正在设计的网站上的所有页面都是有效的 XHTML 1.0 Strict，除了主页具有从“我的地图”生成的 Google 地图链接

 <div  id="map">
 <iframe src="https://www.google.com/maps/d/embed?mid=zBNEhg5_DRUg.ke97rR7SIh5I" width="320" height="240"></iframe>    
 </div>

错误是：

there is no attribute "src"
there is no attribute "width"
there is no attribute "height"
element "iframe" undefined

我读过的一些文章建议用替代品替换这些文章，但我不确定如何做。

是否有理由不在 Google 中使用地图生成器？

【问题讨论】：

标签： html google-maps iframe

【解决方案1】：

要验证 google 嵌入式地图，您不需要使用 <iframe>，这在 XHTML Strict 中是不允许的。请改用<object>（参考：Why won't <iframe> elements validate in HTML 4.01?）而不是src（不支持），改用data。

example that valids XHTML Strict 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>example embedded map</title>
</head>
<body>
  <div>
    <object width="600" height="450" style="border:0" data="https://www.google.com/maps/embed/v1/directions?key=API_key&amp;origin=Bern&amp;destination=Bern&amp;waypoints=Paris%7CBerlin%7CRome"></object>
  </div>
</body>
</html>

【讨论】：