TypeError: window.initMap is not a function

Solution 1:

Actually the error is being generated by the initMap in the Google's api script

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

so basically when the Google Map API is loaded then the initMap function is executed. If you don't have an initMap function, then the initMap is not a function error is generated.

So basically what you have to do is one of the following options:

1. to create an initMap function
2. replace the callback function with one of your own that created for the same purpose but named it something else
3. replace the &callback=angular.noop if you just want an empty function() (only if you use angular)

Solution 2:

My explanation of this problem:

The .....&callback=initMap" async defer></script> makes that script load async (in parallel with DOM) and after load - execute initMap function. NOTICE that initMap() in global scope! We can't declare our initMap() after google's script because it should already be at the moment of finish async load. Although we can't load our script before this, because we need google's function to execute ours. This is like vicious circle.

Three solutions:

1'st and worst: make google's script load synchronously

1. remove async defer
2. remove &callback=initMap in src attribute
3. put <script tag with your code after google's script

2'nd and best: just do this =)

1. leave .....&callback=initMap" async defer></script> as is
2. and put google's <script tag after your script

3. write in your script

   function initMap() {} // now it IS a function and it is in global
   
   $(() => {
     initMap = function() {
       // your code like...
       var map = new google.maps.Map(document.getElementById('map'), {/*your code*/});
       // and other stuff...
     }
   })
   

   this allow you load google's script async and run yours just after that

3'rd and strange: it will work... some times =)

3. do same but simply write in global scope

   function initMap() {
     // your code
   }
   

   and if you write it in global scope, that will work regardless of what which code loads faster, your (sync) or google's (async). More often your wins

Solution 3:

I have been struggling for several days with this very popular in the last few months issue - "initMap is not a function".

Those two threads helped me:

1. How to make a callback to Google Maps init in separate files of a web app

2. Defer attribute doesn't work with Google Maps API?

Why does the map open sometimes and sometimes not. It depends on several factors like speed of connection, environment, etc. Because the initialization function sometimes runs after the google maps API kicks in, that's why the map is not displayed and the browser console throws an error. For me removing only the async attribute fixed the issue. The defer attribute stays.

If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing) If async is not present and defer is present: The script is executed when the page has finished parsing If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page Source - http://www.w3schools.com/tags/att_script_defer.asp

Hope that helps. Cheers.

Solution 4:

Removing =initMap worked for me:

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