CODEWITHSUNDEEP
windowsmacosgoogle-chromecanvasgoogle-maps-api-3
NDBoost
NDBoost

Reputation: 10634

Google Maps api v3 + canvas + chrome causes black boxes on youtube videos and map elements

Im experiencing two problems..

Problem 1 This only happens on chrome on a mac, tried canary and older versions.. the rectangle is a <canvas> element.. here is a screenshot of it. It appears the black rectangles are where the marker would be. The marker is still clickable, just unable to see it.

enter image description here

Problem 2 I am getting a black box covering youtube videos that are embedded in the InfoBubble of google maps api v3. The black box typically goes away when you zoom in after clicking the marker icon. This only occurs on Chrome in windows.

enter image description here

The development site i am referring to is located here: http://sgaz.mapitusa.com Select Health & Wellness and click on the red marker icon.

I'm putting a bounty on this, as i can't get an answer and i need one in order to move this product into production status.

Here is a GIST of the map code https://gist.github.com/a5515bd0b0139185ea16

here is a GIST of the map init code https://gist.github.com/4937a60d2402e99278b0

Update: Here is the iframe code that embeds the youtube video:

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

The black box over the video is selectable in chrome -> inspect element and this is the 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">

Upvotes: 15

Views: 2630

Answers (2)

Trevor
Trevor

Reputation: 26

Add the following style to your iFrames:
iframe { -webkit-transform:translate3d(0,0,0); }
That fixed the problem for me in Chrome and Safari on Windows 7.

Upvotes: 1

Fraser
Fraser

Reputation: 17059

You have a cross-domain scripting error, in Chrome on both OS's.

Unsafe JavaScript attempt to access frame with URL http://sgaz.mapitusa.com/ from frame with URL http://www.youtube.com/embed/XFDtfg7RquI. Domains, protocols and ports must match.

You can use the (Experimental) JavaScript Player API for iframe embeds to circumvent this issue. http://code.google.com/apis/youtube/iframe_api_reference.html

I also get the error

Uncaught TypeError: Property 'focus' of object [object DOMWindow] is not a function http://sgaz.mapitusa.com/ line 94

In chrome 17.0.9 on windows XP.

Upvotes: 6

Related Questions