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 (n

Answer 1

I was trying to load google maps in a partial view that would load as a standard page (which wasn't the problem) or a bootstrap modal and having no luck with this error (for the modal):

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'm not using scripts because I'm dynamically calling the markers from my data model (or I at least I haven't gotten that far yet). Anyway, thanks to Hamza, I was able to get it working with this:

<div id="map-canvas" style="width:512px;height:464px;"></div>

@*<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>*@
    <script type="text/javascript">
    function initialize() {
        var mapDiv = document.getElementById('map-canvas');

        var mapOptions = {
            zoom: 1,
            minzoom: 1,
            mapTypeControl: true,
            zoomControl: true,
            scaleControl: true,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(mapDiv, mapOptions);

        //var markers = getMarkers(map);
        map.setCenter({ lat: 0, lng: 0 });

    };

    //google.maps.event.addDomListener(window, 'load', initialize);
    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);
</script>

One more thought, I had to remove the fade from my modal as well which correlates to someone else commenting they had to delay the execution by a second. I tried the resizetarget fix and all that with no luck as well.

Lots of trial and error on this one, hopefully saves someone some time.

Answer 2

You need to load the js file after the body tag end.

Answer 3

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 4

//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.