How do I use Google autoload to load JQuery?

Question

How do I use Google autoload functionality to automatically load JQuery?

http://code.google.com/apis/ajax/documentation/autoloader-wizard.html

Reading the documention, I thought the below would work but doesn't.

<script type="text/javascript" src="http://www.google.com/jsapi?autoload={"modules":[{name:"maps",version:3,{name:"maps",version:3,other_params:"sensor=false"},{"name":"jquery","version":"1.3.2"},{"name":"jqueryui","version":"1.7.2"}]}"></script>

However, the above code does not work, even if I encode the URL as:

<script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7Bname%3A%22maps%22%2Cversion%3A3%2C%7Bname%3A%22maps%22%2Cversion%3A3%2Cother_params%3A%22sensor%3Dfalse%22%7D%2C%7B%22name%22%3A%22jquery%22%2C%22version%22%3A%221.3.2%22%7D%2C%7B%22name%22%3A%22jqueryui%22%2C%22version%22%3A%221.7.2%22%7D%5D%7D"></script>

You're URL-encoding too much of the URL, to the point that it's no longer valid. Only the bit after `autoload=` needs to be URL-encoded. — Christopher Orr, Jan 05 '10 at 05:13

score 2 · Answer 1 · answered Jan 05 '10 at 05:10

2

Go to Firefox -> Firebug -> Console Panel. Expand console input prompt on right side

Run this javascript code:

'http://www.google.com/jsapi?autoload='+encodeURIComponent(JSON.stringify({
  "modules" : [
    {
      "name" : "jquery",
      "version" : "1.3.2"
    },
    {
      "name" : "jqueryui", 
      "version" : "1.7.2"
    }
  ]
}))

It outputs final URL into console like this:

http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22jquery%22%2C%22version%22%3A%221.3.2%22%7D%2C%7B%22name%22%3A%22jqueryui%22%2C%22version%22%3A%221.7.2%22%7D%5D%7D

You may experiment with various settings as documented here: http://code.google.com/apis/ajaxlibs/documentation

answered Jan 05 '10 at 05:10

Antonin Hildebrand

773
9
14

Don't forget to add Google Maps v3 with sensor=false – TeddyR Jan 05 '10 at 05:11
@Darwin, you'll see in my updated original post that my code is very similar and does not work. Any ideas? – TeddyR Jan 05 '10 at 05:13
When I put final url into Firefox addressbar and load that script, it looks good. Last two lines are google.load("jquery","1.3.2",{}); and google.load("jqueryui","1.7.2",{}); so I expect you have bug somewhere else. – Antonin Hildebrand Jan 05 '10 at 05:16
Official docs speak only about using Google Maps API version 2 and 2.x (http://code.google.com/apis/ajax/documentation/#AvailableAPIs) – Antonin Hildebrand Jan 05 '10 at 05:20
@Darwin, Google Maps API v3 is officially supported. Go to http://code.google.com/apis/maps/documentation/v3/demogallery.html see the Autoload example for v3. -->http://gmaps-samples-v3.googlecode.com/svn/trunk/commonloader/autoload.html – TeddyR Jan 05 '10 at 05:37
google.load for loading jQuery and jQuery UI has been officially deprecated by Google, because it can slow loading time. You should instead link directly to the URL for the version you need like they do in HTML5 Boilerplate. Check Bryan McQuade's comment here: https://groups.google.com/group/google-ajax-search-api/browse_thread/thread/221ac032b65e73ff?hl=en_US – Andrew De Andrade May 05 '12 at 20:18
For anyone who finds this, the jsapi loader was deprecated years ago, but it still runs. It is now being redirected to the loader for Google Charts, with some backward compatibility to keep things working. However, the autoload parameter needs to be strict JSON, so use this answer. – dlaliberte May 06 '20 at 20:14

score 1 · Answer 2 · answered Jan 05 '10 at 05:42

I found the answer, it's:

<script type="text/javascript" src="http://www.google.com/jsapi?autoload={"modules":[{name:"maps",version:3,other_params:"sensor=false"},{"name":"jquery","version":"1.3.2"},{"name":"jqueryui","version":"1.7.2"}]}"></script>

encoded:

<script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7Bname%3A%22maps%22%2Cversion%3A3%2Cother_params%3A%22sensor%3Dfalse%22%7D%2C%7B%22name%22%3A%22jquery%22%2C%22version%22%3A%221.3.2%22%7D%2C%7B%22name%22%3A%22jqueryui%22%2C%22version%22%3A%221.7.2%22%7D%5D%7D"></script>

Trav L · Answer 3 · 2010-01-05T05:07:09.057

0

It is possible to load a number of javascript libraries using google's loader.

Follow the instructions as on Google Dev Guide Auto-Loading section, and add the HTML snippet into your HTML page or presentation page.

EDIT:

For your example it should be:

<script src="http://www.google.com/jsapi?autoload=%7B%22modules%22+%3A+%5B%7B%22name%22+%3A+%22jquery%22%2C%22version%22+%3A+%221%22%2C%7D%2C%7B%22name%22+%3A+%22jqueryui%22%2C%22version%22+%3A+%221%22%7D%5D%7D&key=YOUR_API_KEY_HERE"></script>

Remember to add your API key in the end of the autoload URL.

edited Jan 05 '10 at 05:07

answered Jan 05 '10 at 04:57

Trav L

14,732
6
30
39

I've updated my original post. I'm using Google Maps 3 (so no api key needed), JQuery (1.3.2) and JQueryUI (1.7.2). However, the code in my original post does not work. Any ideas why? – TeddyR Jan 05 '10 at 05:09

How do I use Google autoload to load JQuery?

3 Answers3