Visual Studio Code VM9623 Uncaught ReferenceError: process is not defined - google-chrome
I'm using VSCode and Google Chrome from developing a React App.
Every time I save changes in my React app on VSCode, it refreshes the Chrome page, but strangely it adds an overlay iframe to the whole page and nothing is clickable anymore. Here is the html code for the iframe that gets added:
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;">
<html data-lt-installed="true">
<head></head>
<body>
<script type="text/javascript">[THE CONTENT OF THE SCRIPT IS SO LONG THAT I CANNOT COPY IT HERE!]</script>
</body>
</html>
</iframe>
Also, it gives me the following error code in the console that is coming from VM9623:2:
Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1)
The issue gets resolved by refreshing the page, but it is frustrating that every time I save changes on VSCode, I have to manually refresh the page again!
If upgrading to react-scriptsv5 is not working for you, you can also try another alternative which is fixed in react-error-overlay in version 6.0.9:
All this to your package.json
React Uncaught ReferenceError: process is not defined
it worked for me to add this to my package.json
"devDependencies": {
"react-error-overlay": "6.0.9",
}
link to article:
https://github.com/facebook/create-react-app/issues/11773
for me the following worked:
//reset-css file or css global file
iframe {
display: none !important;
}
remembering that this error is happening only in development environments, build from production environments work normally, apparently it's a react hot-refresh problem
as said here:
https://github.com/facebook/create-react-app/issues/11773#issuecomment-995415266
Related
An iframe suddenly appeared after Login and disabled all the screen
I'm developing a React application, using Facebook and Google login.
When I start my application the following iframe suddenly appears as the latest instruction of my index.html file:
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
As can be noted, the iframe is empty, but occupy the entire screen, with a really high z-index, and this set put it on top on every other object on the screen, effectively preventing the user to interact with the application.
My opinion is that this iframe would be generated by google if something doesn't like them about the application settings.
This is the initial part of the iframe body, as someone could recognize it; as you can see, there are strange unicode characters too:
<script type="text/javascript">/*! For license information please see iframe-bundle.js.LICENSE.txt */
(()=>{var e={5270:e=>{e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n},e.exports.default=e.exports,e.exports.__esModule=!0},3041:(e,t,r)=>{var n=r(6487);e.exports=function(e,t){var r="undefined"!==typeof Symbol&&e[Symbol.iterator]||e["##iterator"];if(!r){if(Array.isArray(e)||(r=n(e))||t&&e&&"number"===typeof e.length){r&&(e=r);var o=0,a=function(){};return{s:a,n:function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}},e:function(e){throw e},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,l=!0,u=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return l=e.done,e},e:function(e){u=!0,i=e},f:function(){try{l||null==r.return||r.return()}finally{if(u)throw i}}}},e.exports.default=e.exports,e.exports.__esModule=!0},6487:(e,t,r)=>{var n=r(5270);e.exports=function(e,t){if(e){if("string"===typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,t):void 0}},e.exports.default=e.exports,e.exports.__esModule=!0},7162:(e,t,r)=>{e.exports=r(2205)},8641:(e,t,r)=>{"use strict";t.rf=u;var n=r(8048),o=!1;function a(e){return{gutter:e.grey,marker:e.red.bold,message:e.red.bold}}var i=/\r\n|[\n\r\u2028\u2029]/;function l(e,t,r){var n=Object.assign({column:0,line:-1},e.start),o=Object.assign({},n,e.end),a=r||{},i=a.linesAbove,l=void 0===i?2:i,u=a.linesBelow,s=void 0===u?3:u,c=n.line,f=n.column,d=o.line,p=o.column,h=Math.max(c-(l+1),0),g=Math.min(t.length,d+s);-1===c&&(h=0),-1===d&&(g=t.length);var m=d-c,v={};if(m)for(var y=0;y<=m;y++){var b=y+c;if(f)if(0===y){var w=t[b-1].length;v[b]=[f,w-f+1]}else if(y===m)v[b]=[0,p];else{var x=t[b-y].length;v[b]=[0,x]}else v[b]=!0}else v[c]=f===p?!f||[f,0]:[f,p-f];return{start:h,end:g,markerLines:v}}function u(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=(r.highlightCode||r.forceColor)&&(0,n.shouldHighlight)(r),u=(0,n.getChalk)(r),s=a(u),c=function(e,t){return o?e(t):t},f=e.split(i),d=l(t,f,r),p=d.start,h=d.end,g=d.markerLines,m=t.start&&"number"===typeof t.start.column,v=String(h).length,y=o?(0,n.default)(e,r):e,b=y.split(i,h).slice(p,h).map((function(e,t){var n=p+1+t,o=" ".concat(n).slice(-v),a=" ".concat(o," |"),i=g[n],l=!g[n+1];if(i){var u="";if(Array.isArray(i)){var f=e.slice(0,Math.max(i[0]-1,0)).replace(/[^\t]/g," "),d=i[1]||1;u=["\n ",c(s.gutter,a.replace(/\d/g," "))," ",f,c(s.marker,"^").repeat(d)].join(""),l&&r.message&&(u+=" "+c(s.message,r.message))}return[c(s.marker,">"),c(s.gutter,a),e.length>0?" ".concat(e):"",u].join("")}return" ".concat(c(s.gutter,a)).concat(e.length>0?" ".concat(e):"")})).join("\n");return r.message&&!m&&(b="".concat(" ".repeat(v+1)).concat(r.message,"\n").concat(b)),o?u.reset(b):b}},1714:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.isIdentifierStart=s,t.isIdentifierChar=c,t.isIdentifierName=function(e){for(var t=!0,r=0;r<e.length;r++){var n=e.charCodeAt(r);if(55296===(64512&n)&&r+1<e.length){var o=e.charCodeAt(++r);56320===(64512&o)&&(n=65536+((1023&n)<<10)+(1023&o))}if(t){if(t=!1,!s(n))return!1}else if(!c(n))return!1}return!t};var r="ªµºÀ-ÖØ-öø-ˁˆ-ˑˠ-ˤˬˮͰ-ʹͶͷͺ-ͽͿΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ҁҊ-ԯԱ-Ֆՙՠ-ֈא-תׯ-ײؠ-يٮٯٱ-ۓەۥۦۮۯۺ-ۼۿܐܒ-ܯݍ-ޥޱߊ-ߪߴߵߺࠀ-ࠕࠚࠤࠨࡀ-ࡘࡠ-ࡪࡰ-ࢇࢉ-ࢎࢠ-ࣉऄ-हऽॐक़-ॡॱ-ঀঅ-ঌএঐও-নপ-রলশ-হঽৎড়ঢ়য়-ৡৰৱৼਅ-ਊਏਐਓ-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹਖ਼-ੜਫ਼ੲ-ੴઅ-ઍએ-ઑઓ-નપ-રલળવ-હઽૐૠૡૹଅ-ଌଏଐଓ-ନପ-ରଲଳଵ-ହଽଡ଼ଢ଼ୟ-ୡୱஃஅ-ஊஎ-ஐஒ-கஙசஜஞடணதந-பம-ஹௐఅ-ఌఎ-ఐఒ-నప-హఽౘ-ౚౝౠౡಀಅ-ಌಎ-ಐಒ-ನಪ-ಳವ-ಹಽೝೞೠೡೱೲഄ-ഌഎ-ഐഒ-ഺഽൎൔ-ൖൟ-ൡൺ-ൿඅ-ඖක-නඳ-රලව-ෆก-ะาำเ-ๆກຂຄຆ-ຊຌ-ຣລວ-ະາຳຽເ-ໄໆໜ-ໟༀཀ-ཇཉ-ཬྈ-ྌက-ဪဿၐ-ၕၚ-ၝၡၥၦၮ-ၰၵ-ႁႎႠ-ჅჇჍა-ჺჼ-ቈቊ-ቍቐ-ቖቘቚ-ቝበ-ኈኊ-ኍነ-ኰኲ-ኵኸ-ኾዀዂ-ዅወ-ዖዘ-ጐጒ-ጕጘ-ፚᎀ-ᎏᎠ-Ᏽᏸ-ᏽᐁ-ᙬᙯ-ᙿᚁ-ᚚᚠ-ᛪᛮ-ᛸᜀ-ᜑᜟ-ᜱᝀ-ᝑᝠ-ᝬᝮ-ᝰក-ឳៗៜᠠ-ᡸᢀ-ᢨᢪᢰ-ᣵᤀ-ᤞᥐ-ᥭᥰ-ᥴᦀ-ᦫᦰ-ᧉᨀ-ᨖᨠ-ᩔᪧᬅ-ᬳᭅ-ᭌᮃ-ᮠᮮᮯᮺ-ᯥᰀ-ᰣᱍ-ᱏᱚ-ᱽᲀ-ᲈᲐ-ᲺᲽ-Ჿᳩ-ᳬᳮ-ᳳᳵᳶᳺᴀ-ᶿḀ-ἕἘ-Ἕἠ-ὅὈ-Ὅὐ-ὗὙὛὝὟ-ώᾀ-ᾴᾶ-ᾼιῂ-ῄῆ-ῌῐ-ΐῖ-Ίῠ-Ῥῲ-ῴῶ-ῼⁱⁿₐ-ₜℂℇℊ-ℓℕ℘-ℝℤΩℨK-ℹℼ-ℿⅅ-ⅉⅎⅠ-ↈⰀ-ⳤⳫ-ⳮⳲⳳⴀ-ⴥⴧⴭⴰ-ⵧⵯⶀ-ⶖⶠ-ⶦⶨ-ⶮⶰ-ⶶⶸ-ⶾⷀ-ⷆⷈ-ⷎⷐ-ⷖⷘ-ⷞ々-〇〡-〩〱-〵〸-〼ぁ-ゖ゛-ゟァ-ヺー-ヿㄅ-ㄯㄱ-ㆎㆠ-ㆿㇰ-ㇿ㐀-䶿一-ꒌꓐ-ꓽꔀ-ꘌꘐ-ꘟꘪꘫꙀ-ꙮꙿ-ꚝꚠ-ꛯꜗ-ꜟꜢ-ꞈꞋ-ꟊꟐꟑꟓꟕ-ꟙꟲ-ꠁꠃ-ꠅꠇ-ꠊꠌ-ꠢꡀ-ꡳꢂ-ꢳꣲ-ꣷꣻꣽꣾꤊ-ꤥꤰ-ꥆꥠ-ꥼꦄ-ꦲꧏꧠ-ꧤꧦ-ꧯꧺ-ꧾꨀ-ꨨꩀ-ꩂꩄ-ꩋꩠ-ꩶꩺꩾ-ꪯꪱꪵꪶꪹ-ꪽꫀꫂꫛ-ꫝꫠ-ꫪꫲ-ꫴꬁ-ꬆꬉ-ꬎꬑ-ꬖꬠ-ꬦꬨ-ꬮꬰ-ꭚꭜ-ꭩꭰ-ꯢ가-힣ힰ-ퟆퟋ-ퟻ豈-舘並-龎ff-stﬓ-ﬗיִײַ-ﬨשׁ-זּטּ-לּמּנּסּףּפּצּ-ﮱﯓ-ﴽﵐ-ﶏﶒ-ﷇﷰ-ﷻﹰ-ﹴﹶ-ﻼＡ-Ｚａ-ｚｦ-ﾾￂ-ￇￊ-ￏￒ-ￗￚ-ￜ",n="·̀-ͯ·҃-֑҇-ׇֽֿׁׂׅׄؐ-ًؚ-٩ٰۖ-ۜ۟-۪ۤۧۨ-ۭ۰-۹ܑܰ-݊ަ-ް߀-߉߫-߽߳ࠖ-࠙ࠛ-ࠣࠥ-ࠧࠩ-࡙࠭-࡛࢘-࢟࣊-ࣣ࣡-ःऺ-़ा-ॏ॑-ॗॢॣ०-९ঁ-ঃ়া-ৄেৈো-্ৗৢৣ০-৯৾ਁ-ਃ਼ਾ-ੂੇੈੋ-੍ੑ੦-ੱੵઁ-ઃ઼ા-ૅે-ૉો-્ૢૣ૦-૯ૺ-૿ଁ-ଃ଼ା-ୄେୈୋ-୍୕-ୗୢୣ୦-୯ஂா-ூெ-ைொ-்ௗ௦-௯ఀ-ఄ఼ా-ౄె-ైొ-్ౕౖౢౣ౦-౯ಁ-ಃ಼ಾ-ೄೆ-ೈೊ-್ೕೖೢೣ೦-೯ഀ-ഃ഻഼ാ-ൄെ-ൈൊ-്ൗൢൣ൦-൯ඁ-ඃ්ා-ුූෘ-ෟ෦-෯ෲෳัิ-ฺ็-๎๐-๙ັິ-ຼ່-ໍ໐-໙༘༙༠-༩༹༵༷༾༿ཱ-྄྆྇ྍ-ྗྙ-ྼ࿆ါ-ှ၀-၉ၖ-ၙၞ-ၠၢ-ၤၧ-ၭၱ-ၴႂ-ႍႏ-ႝ፝-፟፩-፱ᜒ-᜕ᜲ-᜴ᝒᝓᝲᝳ឴-៓៝០-៩᠋-᠍᠏-᠙ᢩᤠ-ᤫᤰ-᤻᥆-᥏᧐-᧚ᨗ-ᨛᩕ-ᩞ᩠-᩿᩼-᪉᪐-᪙᪰-᪽ᪿ-ᫎᬀ-ᬄ᬴-᭄᭐-᭙᭫-᭳ᮀ-ᮂᮡ-ᮭ᮰-᮹᯦-᯳ᰤ-᰷᱀-᱉᱐-᱙᳐-᳔᳒-᳨᳭᳴᳷-᳹᷀-᷿‿⁀⁔⃐-⃥⃜⃡-⃰⳯-⵿⳱ⷠ-〪ⷿ-゙゚〯꘠-꘩꙯ꙴ-꙽ꚞꚟ꛰꛱ꠂ꠆ꠋꠣ-ꠧ꠬ꢀꢁꢴ-ꣅ꣐-꣙꣠-꣱ꣿ-꤉ꤦ-꤭ꥇ-꥓ꦀ-ꦃ꦳-꧀꧐-꧙ꧥ꧰-꧹ꨩ-ꨶꩃꩌꩍ꩐-꩙ꩻ-ꩽꪰꪲ-ꪴꪷꪸꪾ꪿꫁ꫫ-ꫯꫵ꫶ꯣ-ꯪ꯬꯭꯰-꯹ﬞ︀-️︠-︯︳︴﹍-﹏０-９＿",o=new RegExp("["+r+"]"),a=new RegExp("["+r+n+"]");r=n=null;var i=[0,11,2,25,2,18,2,1,2,14,3,13,35,122,70,52,268,28,4,48,48,31,14,29,6,37,11,29,3,35,5,7,2,4,43,157,19,35,5,35,5,39,9,51,13,10,2,14,2,6,2,1,2,10,2,14,2,6,2,1,68,310,10,21,11,7,25,5,2,41,2,8,70,5,3,0,2,43,2,1,4,0,3,22,11,22,10,30,66,18,2,1,11,21,11,25,71,55,7,1,65,0,16,3,2,2,2,28,43,28,4,28,36,7,2,27,28,53,11,21,11,18,14,17,111,72,56,50,14,5
Is there anyone who has already stumbled upon this behavior?
Solution: npm i -D react-error-overlay#6.0.9 Basically this iframe appeared when it found some kind of compiling error. in my case the error is like https://postimg.cc/gn3Q8mdH without react-error-overlay#6.0.9 the overlay appeared with transparent text & background so we can not see that. After run "npm i -D react-error-overlay#6.0.9" reload and this time the overlay shows the error with exact text and now just fixed the error. and the site will run perfectly.
ReportViewer Scroll Bars not visible on Internet Explorer 11
Scroll bars are visible in chrome but not in Internet Explorer 11 I have tried debugging and inspecting element to find in the DOM where exactly are the scroll bars. Didn't get any luck
found a suggestion on this link :-
https://social.msdn.microsoft.com/Forums/sqlserver/en-US/5e03c026-7359-4c0a-8c12-97dac9a2eb9c/reportviewer-2012-scroll-bars?forum=sqlreportingservices
At very bottom of the link this guy named - Palanichamy suggested to put below code in the css file.
#VisibleReportContentctl32_ctl09{
position : absolute;
_:-ms-fullscreen, :root;
}
And other guy on the same link suggested where that file exactly located :
To the following file on my report server:
C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportManager\Styles\ReportServices.css
But I still didn't get any luck. So the last thing I tried is I copied the code in whatever report you are trying to run its name.aspx file and in the header tag I created a new style tag and then found out the correct id of the element by inspecting code.
<head runat="server">
<title></title>
<style type="text/css">
#VisibleReportContentrvAdHocReport_ctl09 {
position : absolute;
_:-ms-fullscreen, :root;
}
</style>
ios safari strange double-click/hover behviour
I recently made a (responsive) redesign for a website of mine. Oddly there is a strange behaviour of the links in some places which every tester missed (because they thought they had missed the link I imagine): If you click on these links they only get "activated" -- but they aren't followed. If you click them again, then they work fine. This even works if you click say 7 links in a row and then the first one again. This only happens on ios 8.x (Tested on 8.4.1.) but not on 7.x and not on android or any desktop-browser. With remote debugging I see nothing. I don't even know where to start debugging this ... Effect can be seen (with an 8.x iPhone) here: http://www.plamundo.de in the listed products.
I've seen the same behaviour, but only with 8.4.1 not with 8.4. This also seems to be the case on your site. An 8.4.1 device requires a double tap, with 8.4 only one tap is needed. This is a minimal testcase I built:
<html>
<head>
<title>Minimal testcase iOS 8.4.1 hover double tap problem</title>
<style>
body { font-size: 2em; } /* Only needed for a readable font-size */
a { display: block; font-decoration: none;}
a:hover { font-decoration: underline; }
</style>
</head>
<body>
<a href="http://www.apple.com/" >Click me</a>
</body>
</html>
We solved this by making the 'a:hover' conditional. You can do this with a media-query (but that's hard if you also want to target iPads) or with some JavaScript that adds a class which you can use to make the CSS selective. Example:
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
with:
.iamanobnoxiousiphonedevice *:hover{
text-decoration: inherit !important;
}
An easier way to solve this is by removing the 'display: block', but I don't know if that's an option for you.
A strange trick solution that works in a project I am working on is to reset the z-index:
* { z-index: 0 }
Found that hack by Ryan Ou (thx) in an Angular google group
I suspect that it might be Adobe Analytics on our site that "steals" some clicks. Had issues because of Adobe also when trying to set focus on a text field and reveal the keyboard after a click. They caught the initial click so that our became synthetic and became restricted by iOS.
I'm surprised to have encounted this same issue so many years after the original post. I'm exploring solving this as follows:
const onHover = useCallback(
(evt) => {
// ios browsers intercept the tap/click event and instead trigger a mouseover event.
// This happens ONLY if we subscribe to onHover events.
// But we can grab the original event target and directly call click.
if (isIos()) {
evt.target.click?.();
}
// whatever your normal onHover code is can now be called:
onOriginalOnHover();
},
[onOriginalOnHover],
);
This works in my test app. Will need further validation though.
How to add a hand tool (grab the page and drag) function on Chrome and Firefox PDF viewer?
To clarify, hand tool is a function for user click on the pdf and dragging around , that is used to replace the scroll bar navigating .
The problem is, by default the Chrome and Firefox pdf viewer do not have that function and I would like allow the user to drag the page.
A workaround is to use a JavaScript library (Grab to Pan https://github.com/Rob--W/grab-to-pan.js in my case) with an embed object (PDF viewer). When I maximum the size of the pdf and user drag the embed object.
The problem I have encounter is
When using Chrome / Firefox, the PDF content do not fit to the page but auto resize by default even I have set the Adobe PDF open parameter, using iframe.
The JavaScript code seems conflict with the Firefox PDF viewer, it works smoothly on Chrome but not firefox.
Here is the source code, you may download the library from the link mention above and have a look. Don't forget to put a '1.pdf' along with the source file.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Grab-to-pan.js demo</title>
<link rel="stylesheet" href="grab-to-pan.css" type="text/css">
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.scrollable {
overflow: auto;
width: 100%;
height: 100%;
background-color: #EEE;
}
#zoomPage {
overflow:visible;
width: 100%;
height: 150%;
}
</style>
</head>
<body>
<label><input type="checkbox" id="activate-g2p" checked> Activate Grab to Pan</label>
<div class="scrollable" id="scrollable-container">
<object id = 'zoomPage' type='application/pdf' data= '1.pdf#zoom=page-fit'><p>The PDF can not display</p></object>
</div>
<script src="grab-to-pan.js"></script>
<script>
document.getElementById('activate-g2p').onchange = function() {
if (this.checked) g2p.activate();
else g2p.deactivate();
};
var scrollableContainer = document.getElementById('scrollable-container');
var g2p = new GrabToPan({
element: scrollableContainer
});
g2p.activate();
</script>
</body>
</html>
I don't think you can. The pdf is loaded as a embedded object. Assuming that you are developing a web application, you can use pdf.js to load/view pdf documents either with your own JavaScript or using its own viewer. This way you won't have to worry about browser implementation of loading pdf documents, and you can fiddle with the viewer as per your requirements. Hope this helps.
If you want to allow the user to use whatever PDF viewer they have configured, you cannot add functions to that viewer. If you want to control the operation of the viewer, you need to provide it yourself. This is very much an either/or situation. Attempting to mix the two will not lead to good results. Google and Mozilla are free to change their PDF viewers without giving any thought whatsoever to your site. As mentioned above, you can embed PDF.js in your web site, per the instructions at https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website. I don't know whether this viewer's PDF support is good enough for your scenario, but you can certainly test it out. Since the PDF.js code is hosted on your site and thus under your control, you may be able to edit it as you see fit.
Loading KML into Google earth?
I can't figure out why for example I try to reproduce something basic like this example https://google-developers.appspot.com/earth/documentation/samples/fetchkml_example on my own, I can't get it to work. I'm using my key that I have been using for my Google Maps API, so I think that part should be fine, but when it comes to KML I can't seem to get it to work regardless of whether it is fetched or parsed. I have put my KML file here https://sites.google.com/site/shahinkmlexamples/experiment/kml_example.kml , and my code is below with my own key number not shown
<html>
<head>
<title>fetchkml_dom_example.html</title>
<script src="//www.google.com/jsapi?key=MYKEY#"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'https://sites.google.com/' + 'site/shahinkmlexamples/experiment/kml_example.kml';
google.earth.fetchKml(ge, href, function(kmlObject) {
if (kmlObject)
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView() !== null)
ge.getView().setAbstractView(kmlObject.getAbstractView());
});
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="border: 1px solid silver; height: 400px; width: 600px;"></div>
</body>
</html>
so I know the solution has got to be simple, but I just can't figure it out.
Thanks
When you're loading it from a local file (such as using notepad++ and loading that file in Chrome) you need to add a protocol to the script tag: <script src="//www.google.com/jsapi?key=MYKEY#"></script> Becomes: <script src="https://www.google.com/jsapi?key=MYKEY#"></script> Without that change, your page is looking for the file in your local filesystem. It's left out in the samples so that your browser will load the HTTPS version if your page is HTTPS, and the HTTP version if your page is HTTP. This prevents security warnings in the browser.
I'm not sure what your problem is. I put your code into an online editor - http://www.onlinehtmleditor.net/ a simple copy and paste and it worked fine. Also, regarding the API key. For Google Earth you no longer need one. Simply use the generic javascript call below