Google Maps api v3 + canvas + chrome会在youtube视频和地图元素上生成黑框

Question

我遇到两个问题..

问题1 这只发生在Mac上的chrome上，尝试过canary和旧版本..矩形是<canvas>元素..这里是它的截图。看起来黑色矩形是标记的位置。标记仍然可以点击，只是无法看到它。

问题2 我正在获取一个黑盒子，其中包含嵌入在Google Maps api v3的InfoBubble中的YouTube视频。单击标记图标后放大时，黑框通常会消失。 这仅发生在Windows中的Chrome上。

我所指的开发网站位于：http://sgaz.mapitusa.com 选择Health & Wellness and click on the red marker icon.

我正在为此付出赏金，因为我无法得到答案，我需要一个才能将此产品转移到生产状态。

以下是地图代码的GIST https://gist.github.com/a5515bd0b0139185ea16

这是地图初始代码的GIST https://gist.github.com/4937a60d2402e99278b0

更新 以下是嵌入YouTube视频的iframe代码：

<iframe width="246" height="125" src="http://www.youtube.com/embed/XFDtfg7RquI" frameborder="0" allowfullscreen=""></iframe>

视频上的黑框可以在chrome中选择 - ＆gt;检查元素，这是HTML ..

<embed width="100%" id="video-player-flash" height="100%" type="application/x-shockwave-flash" src="http://s.ytimg.com/yt/swfbin/watch_as3-vflTsQfnT.swf" allowscriptaccess="always" allowfullscreen="true" bgcolor="#000000" flashvars="el=embedded&amp;fexp=904527%2C913102%2C913601&amp;is_html5_mobile_device=false&amp;allow_embed=1&amp;allow_ratings=1&amp;hl=en_US&amp;use_tablet_controls=0&amp;eurl=http%3A%2F%2Fsgaz.mapitusa.com%2F&amp;iurl=http%3A%2F%2Fi1.ytimg.com%2Fvi%2FXFDtfg7RquI%2Fhqdefault.jpg&amp;view_count=28&amp;probably_logged_in=1&amp;title=GermRid&amp;avg_rating=0&amp;video_id=XFDtfg7RquI&amp;length_seconds=89&amp;sendtmp=1&amp;enablejsapi=1&amp;sk=abu5-utg87bNYJgjGarozMSmFFhRfpxwC&amp;use_native_controls=false&amp;rel=1&amp;playlist_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswfbin%2Fplaylist_module-vflDOq0Br.swf&amp;iurlsd=http%3A%2F%2Fi1.ytimg.com%2Fvi%2FXFDtfg7RquI%2Fsddefault.jpg&amp;jsapicallback=ytPlayerOnYouTubePlayerReady&amp;playerapiid=player1&amp;framer=http%3A%2F%2Fsgaz.mapitusa.com%2F">

Answer 1

您在两个操作系统的Chrome中都存在跨域脚本错误。

  

不安全的JavaScript尝试使用URL访问框架   来自带框架的框架http://sgaz.mapitusa.com/   http://www.youtube.com/embed/XFDtfg7RquI。域，协议和端口   必须匹配。

您可以使用iframe嵌入的（实验性）JavaScript播放器API来规避此问题。 http://code.google.com/apis/youtube/iframe_api_reference.html

我也得到了错误

  

未捕获的TypeError：属性＆＃39;焦点＆＃39;对象[对象DOMWindow]是   不是函数http://sgaz.mapitusa.com/第94行

在Windows XP上的chrome 17.0.9中。

Answer 2

将以下样式添加到iFrame中：
iframe { -webkit-transform:translate3d(0,0,0); }
这解决了我在Windows 7上的Chrome和Safari中的问题。