I just migrated a working JSfiddle project to Chrome+Codio. I did an exact copy-paste. It failed with the error message:
<p>[blocked] The page at <a href="https://d.codio.com/hugolpz/Censorship-zh/App/index.html">https://d.codio.com/hugolpz/Censorship-zh/App/index.html</a> ran insecure content from <a href="http://maps.google.com/maps/api/js?sensor=false">http://maps.google.com/maps/api/js?sensor=false</a>.
Uncaught ReferenceError: google is not defined index.html:51
window.onload</p>
It works on JSfiddle (Chrome, Firefox), and Codio with Firefox. It confirms that the JS/HTML/CSS is valid.
It doesn't work on "Chrome + Codio.com". The Google map API link is ok on fiddle.net, but flagged "insecure".
What is the source of this Chrome-Codio failure?
[3]: [except chinese characters addresses but it doesn't matter right now]
Explanation: This issue is due to Chrome. When Chrome is on a secure website (https://Codio.com), it refuses to call non-secure (http://) external resources.
Solution/Workaround 1: Also, instead of
<script src="http://mysite.org"></script> // which is forbidden by Chrome!
rather use:
<script src="//mysite.org"></script>
Solution/Workaround 2: I've been noticed[1] that Codio projects can be run on both https:// and http:// urls. So if your project get in trouble when run as :
https://d.codio.com/myName/myProject/App/
switch to no-secure url:
http://d.codio.com/myName/myProject/App/
And all the external ressources should load fine.
[1]: Big thanks to Joel Moss for this explanation and tips !