CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Ryan Q
Ryan Q

Reputation: 10663

Google Maps differences between async loading and general script tag

In an attempt to load google maps asynchronously I took a look at google's async page

Essentially I am looking for an alternative to document.write in the API and according to some users on this google group post Using the async version will handle this scenario.

My question is why would this script:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"
type="text/javascript"></script>

Be any different than:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);

when the first and second both call the same js file which obviously has the document.write within it? Also why would an updated API want to consider using document.write over append if write generally goes against content security policy?

As a little background info I'm experimenting with Google's packaged apps and their csp doesn't allow for document.write.

Upvotes: 3

Views: 9698

Answers (4)

Avishai
Avishai

Reputation: 4732

All you have to do is set a callback to be executed after the map script loads:

Then in your app's main .js file, define the callback:

window.myCallbackFuction = function() {
  return console.log("Loaded Google Maps!");
  // the rest of the maps initialization goes here, per the docs
};

The tricky part is refactoring your code so that any map-related code isn't executed until you're certain that the myCallbacFuction() was executed.

Upvotes: 0

Saumya Kanta Swain
Saumya Kanta Swain

Reputation: 131

Actually the javascript file at maps.googleapis.com/maps/api/js is a dynamic one. The server responds with a different js file for different parameters. To know the difference, just load the following files from a browser address bar.

https://maps.googleapis.com/maps/api/js?v=3.exp and https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize

You will notice that there is a "document.write" in the first js file as quoted below

function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }

whereas there is a document.createElement in the second case as follows

  function getScript(src) {
    var s = document.createElement('script');

    s.src = src;
    document.body.appendChild(s);
  }

The difference is that, when a script is loaded synchronously, the browser waits for it to load completely and when the script calls document.write, the text is appended to the document being loaded. But asynchronous call is made once a document is fully loaded. As a result document.write would replace the existing document, and hence the browser ignores such a call from an asynchronously loaded script. When you load the js with "callback=initialize", the self executing function already contains the call back to initialize, and a modified function which can load further scripts asynchronously.

Upvotes: 1

GFoley83
GFoley83

Reputation: 3539

One of the main advantage of loading scripts (or other resources) asynchronously/dynamically is that it can dramatically speed up your page load times.

From Google's Developer best practices:

https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

When a browser parses a traditional script tag, it must wait for the script to download, parse, and execute before rendering any HTML that comes after it. With an asynchronous script, however, the browser can continue parsing and rendering HTML that comes after the async script, without waiting for that script to complete. When a script is loaded asynchronously, it is fetched as soon as possible, but its execution is deferred until the browser's UI thread is not busy doing something else, such as rendering the web page.

Another trick I use to decide on whether or not to load a script (such as the Google Maps API) asynchronously is, I ask myself, "Is there a chance that the user will not see, benefit or interact with the results of the loaded script?". If the answer is yes, then I'll usually tie the loading of the script to some DOM event (such as button click etc).

In other words, if a user has to click a button on my web page to view my Google Map; why bother loading all that extra script if there's a chance the user will never even see it? Instead, load the script asynchronously when a button is clicked, and then load my map.

Upvotes: 4

j0nes
j0nes

Reputation: 8099

There is an example on how to load Google maps asynchronously. Basic idea is to create a script tag like you did and let this function be executed onload.

Upvotes: -2

Related Questions