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.

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 http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3.2.js. — Rob W, Feb 19 '12 at 21:28
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 ;) — Rob W, Feb 19 '12 at 21:53

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

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');
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 19 '12 at 21:51

Rob W

341,306
83
791
678

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? – MacMac Feb 19 '12 at 21:55
@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](http://maps.google.com/maps/api/js?sensor=true) in order to get the code to work. So, I have actually provided two solutions. Use **one of them, not both**. – Rob W Feb 19 '12 at 22:00
Ah, I get it, thanks for your clarification - your code worked, thanks for that :-) – MacMac Feb 19 '12 at 22:03
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? – MacMac Feb 19 '12 at 23:37
@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? – Rob W Feb 20 '12 at 09:45
I'm doing this on my iPhone 3GS. – MacMac Feb 20 '12 at 11:53
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. – Rob W Feb 20 '12 at 11:57
Exactly where should I place that? Before the first `$.getScript` or the second one? – MacMac Feb 20 '12 at 12:35
Hmm, doesn't seem to improve it, it sometimes loads goMap, sometimes it doesn't for no reason. – MacMac Feb 20 '12 at 12:55
@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? – Rob W Feb 20 '12 at 13:00
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. – MacMac Feb 20 '12 at 13:03
@lolwut Does placing the files in the head solve the problem? `` – Rob W Feb 20 '12 at 13:13

score 0 · Answer 2 · answered Feb 19 '12 at 11:20

@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!

No. My path I correct, it's just a parse error, if it was an invalid file, it would throw an 404 error. — MacMac, Feb 19 '12 at 12:41

jQuery getScript returns an parse error exception

2 Answers2

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

Linked