jQuery getScript returns an parse error exception

Question

I'm trying to load two scripts with the $.getScript function of getting Google Map script, then after that is loaded, I get another script (goMap) which makes map applets easily to be made.

However, when loaded, the first script of getting Google Map API is good, then the second script returns a parse error and shows this:

TypeError: 'undefined' is not a constructor'

Yet, I don't know where that is referencing from or which line, I think it must be trying to execute the Geocoder on this file (first line after (function($){:

http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3.2.js

Here is my code:

$.getScript('http://maps.google.com/maps/api/js?sensor=true').done(function()
{
    $.getScript('../js/gomap.js').done(function()
    {
            // this never gets called
            alert('gomap loaded');
    }).fail(function(jqxhr, settings, exception)
    {
        alert(exception); // this gets shown
    });
}).fail(function()
{
    alert('failed to load google maps');
});

I tried changing the AJAX settings to set async to false, but it didn't help at all.

Nonlinearity

Can you show a link/the source code for ../js/gomap.js? The error is located in that file, which is not the same file as pittss.lv/jquery/gomap/js/jquery.gomap-1.3.2.js. – Apopemptic

Actually, the scripts are equal. It didn't work in my test, because of NoScript. Sorry for the inconvenience, I hope that my working solution relieves you ;) – Apopemptic

Answer 1

The error is caused by the fact that the Google Maps API expects to be loaded in the head, using <script src="http://maps.google.com/maps/api/js?sensor=true"></script>.

If you cannot do that for some reason, there's still hope. The Google Maps API does not work, because it uses document.write to inject a dependency in the page. To get the code to work, you can overwrite the native document.write method.

Demo: http://jsfiddle.net/ZmtMr/

var doc_write = document.write; // Remember original method;
document.write = function(s) {$(s).appendTo('body')};
$.getScript('http://maps.google.com/maps/api/js?sensor=true').done(function() {
    $.getScript('../js/gomap.js').done(function() {
        alert('gomap loaded');
        document.write = doc_write; // Restore method
    }).fail(function(jqxhr, settings, exception) {
        alert(exception); // this gets shown
        document.write = doc_write; // Restore method
    });
}).fail(function() {
    alert('failed to load google maps');
});

Apopemptic

Hmm, I did a test, before the first $.getScript I put alert(typeof google), it returned undefined and after the $.getScript it returns an object, meaning it works - no matter if it needs to load in the head? – Nonlinearity

@lolwut Read my answer carefully. The Google Maps API expects to be included in the head. Your current code dynamically load the Google Maps API. That means that you have to intercept the document.write method (see source code in order to get the code to work. So, I have actually provided two solutions. Use one of them, not both. – Apopemptic

Ah, I get it, thanks for your clarification - your code worked, thanks for that :-) – Nonlinearity

Hmm, sorry to bug you. I'm getting error when loading goMap, sometimes it loads, sometimes it doesn't, do you have an idea why? – Nonlinearity

@lolwut No. Check the network activity using Firebug, Developer tools or HttpFpx, to make sure that the script is requested. Also check whether document.write is equal to function(){}{ [native code] }, to ensure that the script has loaded or failed loading. In which browser are you encountering this issue? – Apopemptic

I'm doing this on my iPhone 3GS. – Nonlinearity

Then use alert instead of console.log, for debugging. Also try containing the block within try{ ..code.. }catch(e){alert(e)}, to see if any errors show up. – Apopemptic

Exactly where should I place that? Before the first $.getScript or the second one? – Nonlinearity

Hmm, doesn't seem to improve it, it sometimes loads goMap, sometimes it doesn't for no reason. – Nonlinearity

@lolwut It's not improving anything, it's used for debugging. Which scripts are loaded? If you include the script in the head instead of loading it dynamically, does that solve any issues? – Apopemptic

Oh, I mean nothing gets alerted in the catch block, even nothing gets logged in the iPhone console log. I only load jQuery, jQuery cookie and jQuery touchwipe in a script file (gzipped too), I can confirm they load just fine, except goMap in the getScript function. – Nonlinearity

@lolwut Does placing the files in the head solve the problem? <script src="http://maps.google.com/maps/api/js?sensor=true"></script><script src="../js/gomap.js"></script> – Apopemptic

Answer 2

@lolwut Try

$.getScript('http://maps.google.com/maps/api/js?sensor=true').done(function()
{
    alert(11);
    $.getScript('http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3.2.js').done(function()
    {
            // this never gets called
            alert('gomap loaded');
    }).fail(function(jqxhr, settings, exception)
    {
        alert(exception); // this gets shown
    });
}).fail(function()
{
    alert('failed to load google maps');
});

If this works then you're relative path ../js/gomap.js is wrong!

Chromatin

No. My path I correct, it's just a parse error, if it was an invalid file, it would throw an 404 error. – Nonlinearity