Moving google maps api code to separate file + jquery

Question

This time, i'll go right to the point:

HTML:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="code.js"></script>
</head>

<body>
    <div id="map"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=*snip*&callback=initMap">
    </script>
</body>

</html>

Code.js:

$(document).ready(function () {
    var map;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: -34.397,
                lng: 150.644
            },
            zoom: 10
        });
    }
});

Result:

Uncaught TypeError: window.initMap is not a function.

Tips?

Also, wonder if this part:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=*snip*&callback=initMap">

Can be moved to the same code.js file.

codegaze · Accepted Answer · 2016-07-29T06:40:30.050

Update: Dear friends, this was an awful answer. A really really awful answer.
Well, the solution was fine, the explanation not. This is my strike-through of shame :)

You don't need to set a $(document).ready() because this tells to the browser to call initMap(); when the document is ready but you have async and defer in your goolemaps script which means that when you try to execute your initiation you are missing some things.

Updated Answer: You need just the initMap() function in your javascript file. If you wrap your function inside a $(document).ready() function (closures, closures, closures people), then this function(initMap) isn't available outside the $(document).ready().

e.g: This doesn't work and returns error 'Uncaught ReferenceError: myfunc is not defined'

     $(document).ready(function(){
        myfunc = function(){
          console.log('myfunc');
        }
     })
     myfunc();

This will work:

    $(document).ready(function(){
        myfunc = function(){
            console.log('myfunc');
        }
        myfunc();
    })

and this will work:

    myfunc = function(){
        console.log('myfunc');
    }
    $(document).ready(function(){
        myfunc();
    })

Why you say? Because of how javascript scope and closures work of course :)

Does this mean the solution is to remove `async` and `defer` from the maps script? — waffl, Nov 06 '15 at 18:13
please elaborate on what "missing some things" might refer to — AlleyOOP, Jul 27 '16 at 21:37
I updated my answer. Thanks for reminding me of this so I could update my answer ;) — codegaze, Jul 29 '16 at 06:42

score 0 · Answer 2 · edited May 23 '17 at 10:30

leave .....&callback=initMap" async defer></script> as it is
put google's <script tag as higher as possible

write in your script

function initMap() {}; // now it IS a function, lol, and it is in global

$(() => { // jquery on load
  initMap = function() {
    // your code like...
    var map = new google.maps.Map(document.getElementById('map'), {...});
    // and other stuff...
  }
})

my complex answer is here

Moving google maps api code to separate file + jquery

2 Answers2

Linked