Databases
StackOverflow2013
Postsdbo
POGoogle Maps api v3 + canvas + chrome causes black boxes on youtube videos and map elements
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps api v3 + canvas + chrome causes black boxes on youtube videos and map elements
    text
    copied!<p>Im experiencing two problems..</p> <p><strong>Problem 1</strong> This only happens on chrome on a mac, tried canary and older versions.. the rectangle is a <code>&lt;canvas&gt;</code> 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. </p> <p><img src="https://i.stack.imgur.com/Pm0cN.png" alt="enter image description here"></p> <p><strong>Problem 2</strong> 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. <strong>This only occurs on Chrome in windows.</strong></p> <p><img src="https://i.stack.imgur.com/Y3tVE.jpg" alt="enter image description here"></p> <p>The development site i am referring to is located here: <a href="http://sgaz.mapitusa.com" rel="noreferrer">http://sgaz.mapitusa.com</a> Select <code>Health &amp; Wellness and click on the red marker icon.</code></p> <p>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.</p> <p><strong>Here is a GIST of the map code</strong> <a href="https://gist.github.com/a5515bd0b0139185ea16" rel="noreferrer">https://gist.github.com/a5515bd0b0139185ea16</a></p> <p><strong>here is a GIST of the map init code</strong> <a href="https://gist.github.com/4937a60d2402e99278b0" rel="noreferrer">https://gist.github.com/4937a60d2402e99278b0</a></p> <p><strong>Update:</strong> Here is the iframe code that embeds the youtube video:</p> <pre><code>&lt;iframe width="246" height="125" src="http://www.youtube.com/embed/XFDtfg7RquI" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt; </code></pre> <p>The black box over the video is selectable in chrome -> inspect element and this is the HTML..</p> <pre><code>&lt;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;amp;fexp=904527%2C913102%2C913601&amp;amp;is_html5_mobile_device=false&amp;amp;allow_embed=1&amp;amp;allow_ratings=1&amp;amp;hl=en_US&amp;amp;use_tablet_controls=0&amp;amp;eurl=http%3A%2F%2Fsgaz.mapitusa.com%2F&amp;amp;iurl=http%3A%2F%2Fi1.ytimg.com%2Fvi%2FXFDtfg7RquI%2Fhqdefault.jpg&amp;amp;view_count=28&amp;amp;probably_logged_in=1&amp;amp;title=GermRid&amp;amp;avg_rating=0&amp;amp;video_id=XFDtfg7RquI&amp;amp;length_seconds=89&amp;amp;sendtmp=1&amp;amp;enablejsapi=1&amp;amp;sk=abu5-utg87bNYJgjGarozMSmFFhRfpxwC&amp;amp;use_native_controls=false&amp;amp;rel=1&amp;amp;playlist_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswfbin%2Fplaylist_module-vflDOq0Br.swf&amp;amp;iurlsd=http%3A%2F%2Fi1.ytimg.com%2Fvi%2FXFDtfg7RquI%2Fsddefault.jpg&amp;amp;jsapicallback=ytPlayerOnYouTubePlayerReady&amp;amp;playerapiid=player1&amp;amp;framer=http%3A%2F%2Fsgaz.mapitusa.com%2F"&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload