Why does google map throw an error at times?

Question

Google Maps

Hello. Connected to the site google maps.
I connect at the end of the page, the very first script.

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwOV3ft4xXnuj9f7aCPTcdKF_bTn6g25A&amp;callback=initMap" async=""></script>

And then a file with your scripts.
Inside this file, the connection looks like this:

$(function() {
   $(document).ready(function(){

  window.initMap = function() {

    var myLatLng = {lat: 45.1201, lng: 39.0096};

    var map = new google.maps.Map(document.getElementById('map'), {
      center: myLatLng,
      scrollwheel: false,
      zoom: 18
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });

  }

});
});

But from time to time I catch this error: Uncaught InvalidValueError: initMap is not a function
I guess this is because the code is executed before the google maps file is included, but why is this? I connect this file first (I tried both the asynchronous version and the simple one), inside my code I write $(document).ready(), which seems to oblige me to wait for the download. But the card still works through time.
Here is the site itself.
map at the bottom

Answer 1

Do instead

window.initMap = function() {

simply

function initMap() {

, and most importantly, take it outside

$(function() {

and before connecting the file from Google.
This happens because your initMap is initialized only when the document is fully loaded, and the file is connected before.