Initmap Is Not A Function In Using Google Maps Api

Question

Solution 1:

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.

Solution 2:

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><scriptsrc="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script><scripttype="text/javascript">functioninitMap() {
        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><divid="map"></div></body></html>

Solution 3:

Moving the google.map API call

<scriptsrc="https://maps.googleapis.com/maps/api/js?key=API_CODE&callback=initMap"asyncdefer></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.

Solution 4:

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

Solution 5:

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

Include this script below your body.

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

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

JavaScript Apprenticeships