Google Maps and loading scripts async - how to order the loading?
<p>If I understand this correctly, using <code>defer</code> will load the scripts in the order I put them.</p>

<p>This will allow me to load jQuery before my own function (because it's lighter and laods more quickly). I load Google Maps at the bottom because it has a callback to a function inside <code>tv-modal.js</code>.</p>

<pre><code>&lt;script src="js/jquery.min.js" defer&gt;&lt;/script&gt;
&lt;script src="js/tv-modal.js" defer&gt;&lt;/script&gt;
&lt;script src="https://maps.googleapis.com/maps/api/js?key=abc&amp;callback=modalMap.initMap" defer&gt;&lt;/script&gt;
</code></pre>

<p>My Js looks like this:</p>

<pre><code>var modalMap = {
    map: null,

    init: function() {
        var self = this;
        this.map = $('#modal-g-map');
    },

    initMap: function(){
        map = new google.maps.Map(document.getElementById('modal-g-map'), {
            center: {lat: 59.9071401, lng: 10.7711175},
            zoom: 11
        });
    }

}.init();
</code></pre>

<p>But Google Map isn't happy:</p>

<blockquote>
  <p>Uncaught InvalidValueError: modalMap.initMap is not a function</p>
</blockquote>

<p>Why can't Google Maps callback call my function modalMap.initMap?</p>