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

回答1:

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>

回答2:

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.

回答3:

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.

回答4:

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/

回答5:

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

回答6:

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 the initMap() function when it is defined in the google.map callback.

来源：https://stackoverflow.com/questions/46319676/initmap-is-not-a-function-in-using-google-maps-api

标签

javascript

google-maps-api-3