CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Akshara
Akshara

Reputation: 137

initMap is not a function in using google maps API

<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 ??

Upvotes: -1

Views: 19653

Answers (6)

Peter
Peter

Reputation: 1109

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.

Upvotes: 3

oividiosCaeremos
oividiosCaeremos

Reputation: 728

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.

Upvotes: 3

Joel Garcia Nu&#241;o
Joel Garcia Nu&#241;o

Reputation: 933

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

Upvotes: 0

duncan
duncan

Reputation: 31912

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>

Upvotes: 3

HugeBelieve
HugeBelieve

Reputation: 322

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/

Upvotes: -2

alt255
alt255

Reputation: 3566

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.

Upvotes: -1

Related Questions