Google jspai fails to load, but only for customer

Question

My website needs to use the Google Earth plugin for just a bit longer (I know, the API is deprecated, but I'm stuck with it for several more months). I load it by including google.com/jsapi, then calling google.load like so:

    ...
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("earth", "1", {"other_params": "sensor=false"});
        google.setOnLoadCallback(function () {
            // call some JavaScript to begin initializing the GE plugin
        });
    </script>
</body>
</html>

This works well from multiple computers and with multiple browser inside our company's firewall. It works well from my home computer, and from my colleagues' home computers. However, when my customer tries to load it, she gets an error message that google is not defined on the line that begins google.load(.

Of course, global variable google is defined at the start of file www.google.com/jsapi, so presumably that file isn't loading. I initially assumed that her corporate firewall was blocking that file, but when I asked her to paste "https://www.google.com/jsapi" into her browser's address bar, she said that immediately loaded up a page of JavaScript.

The entire output to the browser console is:

Invalid URI. Load of media resource  failed. main.html
ReferenceError: google is not defined main.html:484

And I believe the Invalid URI business is just because we don't have a favicon.ico file.

She is running Firefox 35.0.1, though she says the same error occurred with IE (she didn't mention the version of IE).

Short of asking her to install Firebug, which I don't think is going to be feasible, how can I troubleshoot this issue?

Answer 1

Redeploy your code as follows,

<script type="text/javascript">
   try {
      google.load("earth", "1", {"other_params": "sensor=false"});
      google.setOnLoadCallback(function () {
        // call some JavaScript to begin initializing the GE plugin
      });
    } catch (e) {
        $.post('http://<your-remote-debug-script-or-service>',e)
    }
</script>

Then, when your customer encounters the error, the full details will be sent directly to your server and you can troubleshoot as necessary.

Answer 2

I'm really not sure with that assumption but: Could it be, that your first script loads asynchronous? Then for slow connections (your customer) this problem would occur (i know that you are not using the async tag - but maybe the source can trigger to load async).

Best thing to do here is to make sure that the Google code you're using is the sync kind and redeploy.

Also https://bugsnag.com/ can be a really interesting tool for you. Just implement the js and you can track every error your customer gets.

Answer 3

It could be something as simple as the clients browser is blocking javascript from being executed. Maybe specifically blocking your domain or something crazy like that.

Answer 4

Can you try an external script that loads the google jsapi, then put your code in the callback to ensure it is loaded?

<script type="text/javascript">

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

loadScript("https://www.google.com/jsapi", function(){
    google.load("earth", "1", {"other_params": "sensor=false"});
    google.setOnLoadCallback(function () {
        // call some JavaScript to begin initializing the GE plugin
    });
});
</script>

(Modified from http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/)

You may also want to look at jsapi Auto-Loading to minimize what is loaded, but it may get tricky with an older library. https://developers.google.com/loader/