html - How do I load google maps external javascript after page loads? -

I will provide more information to explain my situation. I am building an application with PhoneGap for deployment on iOS. I have AA view / page that the user will navigate (not using AJAX) which will load Google Maps JS script and call the Cordova Geolocation API.

My problem is that Google Maps Script:

  & lt; Script type = "text / javascript" src = "https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX&sensor=true" & gt; & Lt; / Script & gt;  

It takes a very long time to load and prevents the page from rendering for about 3 seconds. I want to postpone the loading of the external script until the page is completely render . The bottom of the page does not help before inserting the script below.

I was trying to use getScript () but it will not work and throws the following error in the debug console: Failed to execute 'write' on the

document: Asynchronous- It is not possible to write in a document with a loaded external script unless it is explicitly opened.

I have tried 'defer' and 'async' in the actual script tags, but it also throws the same error. Other ways to load external JS files were raised with the same error message.

Is there any possible solution for this problem? I do not even know what the meaning of the error statement is ...

I had this solution for me And it worked.

Run the script when creating a domain using jquery.

Instead of using it as your function initialize , instead of using it:

  function initialize () {/ * code you have}  

Do this:

  $ (function () {/ * you code *  

and google.maps.event.addDomListener (window, 'there is no need to load, initiated);

now.

---

edit # 1: I am currently experiencing some familiar problems for you, and I think that I now have a better solution for you.

In your JS file, After the initial event, add this function:

  var ready: // where function ready = function () {var script = document.createElement ( 'script'); Script.type = 'text / javascript'; Script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'libraries = places and amp; +' callback = initialize '; document .body.appendChild (script);};  

What it basically happens is that it first calls the map loader, and after the loader is ready, the map Calls for.
and later on in your HTML page

  & lt; Script & gt; $ .getScript ("you js file path", function () {$ (document) .ready (ready);}); & Lt; / Script & gt;  

and retrieves this script so that you can use its variable, and then you need ready after the DOM is ready. Load it and load it.

I recommend keeping it at the bottom of my HTML page, after the body is closed.