[Solved] initMap is not a function

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:

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

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:

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

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.

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

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

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:

componentDidMount() {
  this.renderMap();
}
  
renderMap = () => {
  loadScript("https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap");
}

initMap = () => {
  let {lat, lng} = this.state;
  map = new window.google.maps.Map(document.getElementById('map'), {
    center: {lat, lng},
    zoom: 8
  });
}

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:

renderMap = () => {
  loadScript("https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap");
  window.initMap = this.initMap;
}

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 ⚡️