Uncaught InvalidValueError: initMap is not a function

Question

I am trying to load a google map with some specific parmeters. I understand the problem is most likely that the initMap function needs to be declared globally. However, I have no idea how, even after searching a number of StackOverflow post with similar problems.

The rest

 <script>
 var databaseArray = [{id: 'BTS1', arfcn: '70', bsic: '29'}
,{id: 'BTS2', arfcn: '60', bsic: '28'}
,{id: 'BTS3', arfcn: '65', bsic: '27'}
,{id: 'BTS4', arfcn: '55', bsic: '26'}
,{id: 'BTS5', arfcn: '75', bsic: '29'}];

var locationArray = [{lat: '60.78064', lng: '10.67037'}
,{lat: '60.76978', lng: '10.66677'}
,{lat: '60.76991', lng: '10.69672'}
,{lat: '60.78889', lng: '10.68462'}
,{lat: '60.76086', lng: '10.65141'}];


function displayDatabase(){
  var table1 = document.getElementById('database');
  for (var i = 0; i < databaseArray.length; i++){
      var bts = databaseArray[i];
      var row = document.createElement('tr');
      var properties = ['id', 'arfcn', 'bsic'];

      for(var j = 0; j < properties.length; j++){
          var cell = document.createElement('td');
          cell.innerHTML = bts[properties[j]];
          row.appendChild(cell);
      }
      table1.appendChild(row);
  }
 }

function displayLocations(){
   var table2 = document.getElementById('location');
   for (var i = 0; i < locationArray.length; i++){
      var location = locationArray[i];
      var row = document.createElement('tr');
      var properties = ['lat', 'lng'];

      for(var j = 0; j < properties.length; j++){
         var cell = document.createElement('td');
         cell.innerHTML = location[properties[j]];
         row.appendChild(cell);
       }
       table2.appendChild(row);
   }
}
</script>
 <body>
   <div id="container">

     <div id="map"></div>

     <div id="info">
       <p>Her skal det så informasjon om cellen.</p>
     </div>
  </div>  

<script>
displayDatabase();
displayLocations();
</script>
<script>

    var map;
    var bts = databaseArray[0];
    var loc = locationArray[0];
    var id1 = bts.id;
    var arfcn1 = bts.arfcn;
    var bsic1 = bts.bsic;
    var latitude = loc.lat;
    var longditude = loc.lng;

    window.initMap = function() {

      var MS = {lat: latitude, lng: longditude};
      var radius = 500;
      if(TA != 0){
          radius = radius * (TA+1);
      }

        var BTS1 = {lat: 60.78064, lng: 10.67037};
        var BTS2 = {lat: 60.76978, lng: 10.66677};
        var BTS3 = {lat: 60.76991, lng: 10.69672};
        var BTS4 = {lat: 60.78889, lng: 10.68462};
        var BTS5 = {lat: 60.76086, lng: 10.65141};
        var BTS8 = {lat: 60.79652, lng: 10.66857};


        var mapOptions = {
            zoom: 13,
            center: BTS1
        }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var image = 'tower1.png';
        var spyware = 'spyware.png';

      var circle = new google.maps.Circle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000'
          fillOpacity: 0.35,
          map: map,
          center: MS,
          radius: radius
        });

        var marker1 = new google.maps.Marker({
            position: BTS1,
            map: map,
            title: 'BTS: 1',
            icon: image
        });

        var marker2 = new google.maps.Marker({
            position: BTS2,
            map: map,
            title: 'BTS: 2',
            icon: image
        });

        var marker3 = new google.maps.Marker({
            position: BTS3,
            map: map,
            title: 'BTS: 3',
            icon: image
        });

        var marker4 = new google.maps.Marker({
            position: BTS4,
            map: map,
            title: 'BTS: 4',
            icon: image
        });

        var marker5 = new google.maps.Marker({
            position: BTS5,
            map: map,
            title: 'BTS: 5',
            icon: image
        });



        var infowindow1 = new google.maps.InfoWindow({
              content: "<B>BTS: 1 <br> ARFCN: 70 <br> BSIC: 29</B> " //BCC 5
          });
        var infowindow2 = new google.maps.InfoWindow({
              content: "<B>BTS: 2 <br> ARFCN: 60 <br> BSIC: 28</B> " //BCC 4
          });
        var infowindow3 = new google.maps.InfoWindow({
              content: "<B>BTS: 3 <br> ARFCN: 65 <br> BSIC: 27</B> " //BCC 3
          });
        var infowindow4 = new google.maps.InfoWindow({
              content: "<B>BTS: 4 <br> ARFCN: 55 <br> BSIC: 26</B> " //BCC 2
          });

        var infowindow5 = new google.maps.InfoWindow({
              content: "<B>BTS: 5 <br> ARFCN: 75 <br> BSIC: 29</B> " //BCC 3
          });

           //=====Eventlistener for InfoWindow
          google.maps.event.addListener(marker1, 'click', function() {
            infowindow1.open(map,marker1);
          });

          google.maps.event.addListener(marker2, 'click', function() {
                infowindow2.open(map,marker2);
              });

          google.maps.event.addListener(marker3, 'click', function() {
                infowindow3.open(map,marker3);
              });

          google.maps.event.addListener(marker4, 'click', function() {
                infowindow4.open(map,marker4);
              });

          google.maps.event.addListener(marker5, 'click', function() {
                infowindow5.open(map,marker5);
              });             

    }

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

Thank you!

The error is stated in the title. The only place initMap is called from is at the callback at the bottom. I allready tried that, unfortunately, the error still occurs. I will try to clean up the code a bit @Craicerjack — Test327732 Test326632, Apr 22 '16 at 13:38
I didnt ask you to state the error but where it occurred and unless I read through all your code I dont know that the callback is the only place `initMap` is called, which is why you should include where the error occurs — Craicerjack, Apr 22 '16 at 13:41
I will take that into account for the next time @Craicerjack. Thanks. — Test327732 Test326632, Apr 22 '16 at 13:48

score 10 · Accepted Answer · answered Apr 22 '16 at 13:38

10

I copied your code but there are some syntax error. So i can't test. But your error is about initMap (of course :)). Delete all code and check initMap and your window.initMap.

function initMap() {alert("ok");}

Is google callback works?

answered Apr 22 '16 at 13:38

a.u.b

1,589
10
25

1

theres no need to delete all his code to check if a function works. – Craicerjack Apr 22 '16 at 13:39
Yeah, i left out some parts of the code, so there will be some syntax errors. Trying your suggestion i can see that the function is in fact called! – Test327732 Test326632 Apr 22 '16 at 13:42
3

The error seems to be in the `var circle = new google.maps.Circle({})` as when i remove the code, it works. Thanks for the help! – Test327732 Test326632 Apr 22 '16 at 13:48
2

This should not be the checked answer. a.u.b. is checking if the func works and @Test327732Test326632 is just removing code which doesnt help. jeets answer is superior – Ian Steffy May 15 '20 at 08:24

jeet.chanchawat · Answer 2 · 2017-06-29T09:54:21.627

7

Found it... Though very late to the party...

If you downloaded the google maps js code from this link https://maps.googleapis.com/maps/api/js and then tried calling it using

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

There is bug in the development tools that the code gets modified.

Find the initMap in the downloaded file and replace whole file with "" Or replace with a fresh copy form the above link and then lock the file or mark it as ReadOnly to avoid the same in future.

edited Jun 29 '17 at 09:54

answered Mar 06 '17 at 13:18

jeet.chanchawat

5,842
5
38
59

initMap does not exist inside the file you linked for download. – Ian Steffy May 15 '20 at 08:32
Try replacing the whole file text with that code n lock. – jeet.chanchawat May 25 '20 at 12:58

score 3 · Answer 3 · answered Sep 09 '19 at 21:34

In my case the function was async and it was crashing since the initmap was being called but it was not loaded at that point yet. So you can just write async="false" as mentioned before:

<script async="false" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>-39Fxo&libraries=places&callback=initMap"></script>

score 2 · Answer 4 · answered Jul 09 '18 at 19:28

2

Not a best way but it fixed my problem.

Call initMap() function manually as a fallback if ever the callback function wont work.

jQuery(document).ready(function($) {
    initMap();
});

Hope this helps.

answered Jul 09 '18 at 19:28

reylimjr

361
8
16

score 0 · Answer 5 · answered Jan 13 '20 at 05:31

0

Anyone having a similar issue, initializing the map variable outside the initMap function worked for me

<script>
  var map;

  function initMap(){

      //your code here
  }
</script>

answered Jan 13 '20 at 05:31

F KIng

438
4
10

link what Your Code Here is – Ian Steffy May 15 '20 at 08:34
1

Kindly see the details here https://developers.google.com/maps/documentation/javascript/tutorial – F KIng May 20 '20 at 05:50

score 0 · Answer 6 · edited Jan 25 '23 at 08:32

I have tried a lot then I realized that I had some code before initMap function which were some async functions. So, they were taking time, and initMap was not initialized before the script loads.

Three things you should take care of

Google Map script should be below your code script.
No window.onloadfunction.
No code before your code to display map.

Here is my code which worked.

 <script>
        function initMap() {
            var options = {
            zoom: 3,
            center: { lat: 51.541837, lng: -0.139199 },
            }
            var map = new google.maps.Map(document.getElementById("map"), options);
        }
</script>

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

I hope that's not really your key – madav Jan 25 '23 at 08:31 — madav, Jan 25 '23 at 08:31

score 0 · Answer 7 · answered Jan 12 '23 at 03:00

This is really late, but I'm going to mention it anyway:

The src attr of the <script /> has a callback function initMap, which tells the script to call that function(like how almost every callback works). If you did not define that function anywhere, it throws an error(basically javascript telling you it can't find the function).

If you don't need to initialise your map (e.g attaching it to the window), you can do away with the callback part, the reference it from windows.google.maps

However, I would recommend @Sanan Ali answer as a way to initialise the map

score -4 · Answer 8 · edited Jun 13 '19 at 07:43

-4

async="false"

would work, try it!

edited Jun 13 '19 at 07:43

barbsan

3,418
11
21
28

answered Jun 13 '19 at 07:22

Veena

11

2

How would this solve the issue? Please [edit] your answer and add some explanation, at least describe where to put this. – barbsan Jun 13 '19 at 07:44
Welcome to stackoverflow. While answering a question, you should give a brief description of your answer and also provide the required steps to understand. check this https://stackoverflow.com/help/how-to-answer – Abhijeet Jun 13 '19 at 12:24

Uncaught InvalidValueError: initMap is not a function

8 Answers8

Linked