-1
<html>
<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap">
 </script>
<body onload="showMap()">
    <div id="map"></div>
    <script type="text/javascript">
    function showMap() {
        console.log('at maps');
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: { lat: -34.397, lng: 150.644 }
                });
    }
    </script>
</body>
</html>

I'm new to scripting . This is my code to display the map. But it throws an uncaught error "initMap is not a function". Can anyone help ??

Akshara
  • 127
  • 1
  • 2
  • 12
  • How/where are you [including the Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API)? – geocodezip Sep 20 '17 at 10:31
  • have included with api key.. But still error thrown – Akshara Sep 20 '17 at 10:35
  • There is no reference to `initMap` in the posted code (so it is very unlikely to exhibit the issue reported in the (current) title of the question). Please provide a [mcve] that demonstrates your issue. – geocodezip Sep 20 '17 at 10:38

6 Answers6

3

Rename showMap to initMap. Google is expecting to call a function named initMap because of the callback=initMap URL parameter you've passed them when loading in the Maps API. But you don't have a function with that name, you've only got a function called showMap.

Also, by specifying that callback parameter, you don't need to then explicitly call initMap or showMap yourself. So remove onload="initMap()" from the <body> tag.

Also, when you load in the Maps API, you've got a typo in the URL, instead of:

jskey=YOUR_API_KEY

it should be:

js?key=YOUR_API_KEY

And finally, you're missing any <head> section, which I've added, and I've moved the function into the <head> so it should be defined by the time the callback function gets called.

So this should work:

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

 <script type="text/javascript">
    function initMap() {
        console.log('at maps');
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: { lat: -34.397, lng: 150.644 }
                });
    }
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>
duncan
  • 31,401
  • 13
  • 78
  • 99
3

Moving the google.map API call

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

after function initMap() is defined fixed this problem for me. I guess Javasrcipt runs sequentially so it can't see the initMap() function when it is defined in the google.map callback.

Peter
  • 1,061
  • 1
  • 13
  • 20
3

Late late answer but you might want to check this answer. The main problem is that you are not putting the script after defining the map. Code simply is looking for a web element before it's created on the page.

oividiosCaeremos
  • 608
  • 1
  • 10
  • 30
  • No. This has nothing to do with that. The API call contains a callback `initMap` and that function doesn't exist. Please remove your answer. – MrUpsidown Mar 20 '23 at 08:24
0

Hi i'm playing too with google maps and i see this error occurs when you open the same file in different tabs of the navigator...

I'm talking about " Uncaught: Vb "

When you reboot your computer this error deseapear so for not reboot you can press 'F12' and then go to 'Network' tab ( F5 ), right click over anything then 'clear browser chache' & 'clear browser cookies'..

If the error Uncaught: Vb still press F5 Two or Three times

Other reference for this question:

GoogleMaps does not load on page load

Anyways your error is thrown cause you don't specify YOUR_API_KEY and the paramater in the URL is not well formatted ( js?key= )

Check this:

https://developers.google.com/maps/documentation/embed/get-api-key

Joel Garcia Nuño
  • 501
  • 6
  • 13
-1

To us google maps you have to first include reference to google maps javascript file.

Include this script below your body. 

<script src="https://maps.googleapis.com/maps/api/js"></script>

Please also read documentation of google maps. You might need api keys too.

alt255
  • 3,396
  • 2
  • 14
  • 20
-1

Put this script tag in you head section.

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

Make sure you replace YOUR_API_KEY label with your key which you can get from here..

https://developers.google.com/maps/documentation/javascript/

HugeBelieve
  • 304
  • 1
  • 7