Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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">
like image 384
NDBoost Avatar asked Feb 11 '12 23:02

NDBoost


People also ask

Why does Google Maps keep going black?

Event if you switch to satellite or terrain views inside Google maps the black screen still loads app on top of the map. To solve, the problem, all you have to do is just disable hardware acceleration.

Can I use Google Maps in my YouTube videos?

If you're using Google Maps content in an online video (e.g. YouTube) primarily for educational, instructional, recreational, or entertainment purposes, you don't need to request permission – but you must still follow our general guidelines and attribute properly.


2 Answers

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.

like image 188
Fraser Avatar answered Oct 06 '22 23:10

Fraser


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.

like image 39
Trevor Avatar answered Oct 06 '22 23:10

Trevor