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

Question

I will provide more information to explain my situation. I am building an application with PhoneGap for deployment on iOS. I have a a view/page that user will navigate to (not using ajax) that will load google maps js scripts that are needed and do a call to the cordova geolocation api.

My issue is that loading the google maps script:

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

Takes too long to load and stops the page from rendering for up to almost 3 seconds. I want to defer the load of the external script until the page has fully rendered. Putting the script down at the bottom of the page just before does not help at all.

I was attempting to use getScript() but it will not work and throws the following error in debug console:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. 

I have tried 'defer' and 'async' in the actual script tag, but that throws the same error as well. Other methods of loading external JS files lands me with the same error message.

Is there any possible workaround to this problem. I don't even know what the error statement means...

Answer 1

I tried this solution of mine and it worked.

Run the script on dom ready using jquery.

basically instead of using your function initialize like this :

function initialize(){ /*You code */ } 

do this:

$(function(){ /*You code */ }) 

And no need for google.maps.event.addDomListener(window, 'load', initialize);

Anymore.

---

Edit #1 : I am currently facing some familiar problem to yours, and I think I have a better solution to you now.

in your JS file, after your initialize function , put this function:

var ready: // Where to store the 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&'+'callback=initialize';       document.body.appendChild(script);     }; 

What it basically does is that it calls for the map loader first, and then calls for the map after the loader is ready.
And afterwards make use of you what just wrote with this

In your html page :

<script>     $.getScript("You js file path",function(){           $(document).ready(ready);     }); </script> 

And this gets the script so you can use its variables, and then call the variable you need ready after the DOM is ready and finished loading.

I recommend putting this at the bottom of your html page,after the body closes.

Answer 2

//Using jQuery's getScript function

$.getScript('[js containing the initialize function]',function(){     $.getScript('https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize'); });  

Explanation:

First load your external script containing the initialize function and upon callback, load the google map API with callback equals to initialize.