What is the difference between loading Google APIs via callback or google.load or a simple script block?

Question

I think the Google API can be loaded into your page in three ways:

1: Uisng simple block script. as

<script type="text/javascript" src="http:/googleapis.com/maps/file.js"></script> 

2: Using a callback where you do something like

 var sc = document.createElement("script"); sc.type="text/javascript"; sc.src = "http:/googleapis.com/maps/file.js&callback=func_Name"; document.getElementsByTagName("head")[0].appendChild(script); 

3: And then using someting like

  <script type="text/javascript" src="http://www.google.com/jsapi"></script> google.load("maps", "1"); 

My question is: Is there a significant difference between the three approaches or just does not matter. Can I use the search and map APIs in a project where I invoke the use of the search API using google.load and display it as a script block?

Answer 1

The first script block is blocked until the browser loads the script file and then executes it. You will be able to use maps directly after the script block. Its a synchronous download option.

The following 2 options are asynchronous.

The second parameter tells the google map to initialize, and then calls the method specified by the callback parameter. With this approach, you decide when is the best time to download api maps. Thus, on request or after loading the page.

The third approach loads api maps through google javascript loader. This gives you the same benefits as the second option, you just don’t need to write the script tag insert manually. The google loader docs also say that your page has already been loaded when you call it ( https://developers.google.com/loader/ ). However, in this case you download an additional file, but you can also use it to load other libraries, for example, for example. JQuery the google loader also suggests specifying a callback parameter in the third object argument, which will be called when the script is available.