initMap is not a function

Question

I can\'t understand what is the problem? I used this example from Google Map APIs: Simple Map

Answer 1

None of the solutions offered were helping me. I finally came across dynamic loading of the script here: https://developers.google.com/maps/documentation/javascript/overview#Loading_the_Maps_API

Because you are loading it in a separate js file the google map api's are not loading in the correct order with the function.

Doing this solved it for me:

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.defer = true;
    
// Attach your callback function to the `window` object
window.initMap = function() {
      // JS API is loaded and available
      // Throw your code within this, it will wait for the google api scripts to completely load
};
    
// Append the 'script' element to 'head'
document.head.appendChild(script);

Hope this helps, I spent a day looking for solution.