InitMap Is Not a Function Google Maps Javascript

Here's a JSFiddle of how it works.

Essentially place your function above the call to Google API

<script>
function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 34.397, lng: 150.644 },
            scrollwheel: false,
            zoom: 2
        });
    } // close function here
    </script>
    <script async defer
                src="">
        </script>

Also the function wasn't properly closed.

TL;DR

In the fiddle, you have a syntax error in not closing the iniMap() with }. Besides, the function is defined after the DOM loads. To fix this:

• set load type to wrap in <body> or <head>
• fix syntax error

Here's how to deal with these.

Global scope

Place initMap in the global scope. do not wrap the function definition within a private or anonymous scope like

(function(){

function initMap(){
    //
}

})();

DOM onload

Define the function in the <head> if possible. or at least before loading the API in <body>. And never define initMap after the dom completely loads like window.onload and document.addEventListener('ondomready', callback)

Good practice

<script>
function initMap(){
  //
}
</script>
<script src=""></script>

Bad practices:

window.onload

<script>
window.onload = function(){
  function initMap(){
     //
  }
}
</script>
<script src=""></script>

And

<script>
document.addEventListener('ondomready', function(){
  function initMap(){
     //
  }
});
</script>
<script src=""></script>

Or $(function(){ }) if you are using jQuery

<script>
$(function(){
  function initMap(){
     //
  }
});
</script>
<script src=""></script>

I have been looking for an answer in many forums, but I just found in my code there was a lost ';'. After deleting the ';' everything worked well.

I know it's not the best answer but I hope it helps someone.

You are calling initMap before it was declared.

<script async defer src=""> </script>

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

initMap()

I stumbled upon this problem too, but in my case the culprit seems to be mod_pagespeed.

I think it modifies the order of scripts in the page, thus previous solutions did not work. I managed to solve it by dynamically adding the Map's script tag.

<script>
    function initMap() {
        // some code
    }

    // dynamically add your map
    var tag = document.createElement('script');
    tag.src = "";
    tag.defer = true;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

I was using leaflet.js and Google gave me this as my default script

    <script async defer src=""></script>

Basically just remove the Callback Query String Parameter because leaflet is supposed to call it.

<script async defer src=""></script>