initMap is not a function

Question

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

<body>
   <!-- Map Section -->
   <section id="map"></section>

   <script src="js/jquery.min.js"></script>
   <script src="js/main.js"></script>
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Y8CqFe-4Egzl5TlPqlFvjRGcuCfHGvY&callback=initMap" async defer></script>
   
</body>

main.js:

//--------------------------------------------------
// Contact Map
//--------------------------------------------------
function initMap() {    
    if ($("#map").length > 0)
    {
        var map;
        map = new google.maps.Map(document.getElementById('map'),{
            center: {lat: 44.4297538, lng: 26.0649221},
            zoom: 16,
            scrollwheel: false,
            zoomControl: false,
            panControl: false,
            streetViewControl: false,
            mapTypeControl: false,
            overviewMapControl: false,
            clickable: false
        });
        
    }
}

Error:

message: "initMap is not a function"

name: "InvalidValueError"

score 5 · Answer 1 · answered Aug 31 '17 at 16:07

5

Having the same issue, I personally removed the &callback=initMap to make it work. Other threads seams to show that initMap is a function you should build yourself.

answered Aug 31 '17 at 16:07

Trolldejo

466
1
7
20

1

I had the same issue...your solution worked...removed the initMap from the script call and it worked. Ironically, what through me for a quite some time is that I didn't even see that in the script line because I have a separate `initMap()` in another custom.js file - so I kept looking at it trying to figure what the issue was. &callback=initMap is calling a function that hasn't loaded yet. my custom.js file loads after the map script - on purpose...so initMap wasn't defined yet. – rolinger Oct 29 '17 at 15:07

score 3 · Answer 2 · answered Jan 20 '17 at 14:21

I had the same issue working on a wordpress template with Sage (a WordPress starter theme).

My js was wrapped with

(function($) {

// all the functions to create map, center markers, etc.

}

Then, the map was initialize in $(document).ready

I removed (function($) { } and just add the functions without $(document).ready then it was ok.

Also, be sure to load the custom js file before the api google map :

<script src="custom-js-google-map.js"></script>

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

score 2 · Answer 3 · answered Aug 21 '20 at 19:45

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.

My script was working fine, but since I added other scripts this start happening to me. After appliying this it worked perfectly! — benjamingranados, Aug 27 '23 at 11:44

ScaisEdge · Answer 4 · 2016-11-06T10:53:33.733

1

Try move in head the loading for script

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">

    <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Y8CqFe-4Egzl5TlPqlFvjRGcuCfHGvY&callback=initMap" async defer></script>

and be sure for right path for

     <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>

eventually try using relative path

     <script src="./js/jquery.min.js"></script>
    <script src="./js/main.js"></script>

edited Nov 06 '16 at 10:53

answered Nov 06 '16 at 10:27

ScaisEdge

131,976
10
91
107

2

thank you for your reply! but i still have the same error. – DenysM Nov 06 '16 at 10:49
of course, i checked it. index.html and contact.html are in the root directory. so, i don't need to use ./ – DenysM Nov 06 '16 at 11:28
2

Try putting the function within the same file (to be sure it works). And make sure __initMap()__ loads without waiting like when using __$(document).ready__ – Hugo Dec 29 '16 at 05:07

initMap is not a function

4 Answers4

Linked