Honestly, the initMap is not a function error is one of the most common mistakes Web Developers make when trying to build an interesting Map-Style, Side-Project Application (i.e. Zillow) using Vanilla JavaScript or JavaScript Framework/Library like Angular, Vue or React.

Before fixing an error, you need to know why it occurs at the first place.

What is Google Maps API initMap function?

Google Maps API script looks like this:

The initMap¬†is a callback function; It’s the function that will be executed after the Google Maps API Asynchronous¬†Script loads.

How to fix the initMap is not a function error?

Well, there are many reasons why you get this error, and here’s a list of the most common 3 reasons, and an insight to fix it if matched any reason:

Reason #1: You don’t even have an initMap¬†function in your code.
ūüí° Make sure to add it, here’s the documentation example:

Reason #2: You have it, but it loads AFTER the script.
ūüí° Whenever the scripts loads, it won’t find the initMap¬†saved in the memory, that’s why you need to have the initMap¬†BEFORE the script loads if you’re using Vanilla JS.

Reason #3: You are using JS Framework/Library (React, for example)
ūüí° Even if you have got the initMap¬†function in your code and everything is OK. You might get this error because React doesn’t know where to find the initMap¬†function… Weird, haa?¬†ūüôĄ

Let me explain this to you, take a look at this code sample:

After loading the script, React will search for the callback function initMap¬†to execute it, and it won’t find it anywhere, that’s why we need to the window¬†global object:

Wonder about loadScript¬†function? It’s a custom function I wrote to load Google Maps API properly in React Application. For more about it, Watch:¬†Add Google Maps to React App [Without Any External Components] YouTube Tutorial

Anyways, here’s how to¬†add our initMap¬†callback function to window¬†object, by modifying the renderMap¬†function:

Now, we’ve added a new variable called initMap¬†in our window¬†global object and we assign its value to be our initMap¬†callback function!¬†‚úĆÔłŹ

Hopefully, this quick tutorial helps you to load Google Maps API in your Web App.

If you have other problems with Google Maps API, let me know in the comments below, and I will add more Problem Solved tutorials like this frequently¬†‚ö°ÔłŹ