ZombieChowder ZombieChowder - 18 days ago 5
Javascript Question

initMap is not a function - map not rendering. Google Maps API - JS

I am experiencing the well known issue

initMap is not a function
and I really don't see how to solve it. I've tried various methods recommended in other questions but none of them work. The only plausible solution I found was involving the usage of AngularJS but I am trying to accomplish script without it.

Here is my html code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src ="script.js" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href ="style.css">
</head>
<body>
<div id ="map-canvas"> </div>
</body>
</html>


JS Code:

window.initMap = function() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
};


For the JS code, I literally copied and pasted what's in Google's documentation with a small change made here
window.initMap = function()
.




Things I've tried:


  1. Changing
    function initMap()
    to
    window.initMap = function()

  2. Delete everything in
    initMap()
    and giving it
    alert("ok")
    to see
    if it will come up. Well, it didn't.

  3. Changed the position of
    async defer
    to the end of the script reference, also put the script reference at the very top.



Questions I've checked in detail:

First try, Second, Third time wasn't the charm

The error message I get :

Error-msg-Chrome

My map is not being rendered and I keep getting this error, any ideas how to fix it?

Answer

Two issues:

  1. Add the missing </script> tag
  2. Change the order of the page load:
<div id="map-canvas"> </div>
<script src="script.js" defer async></script>
<script async defer 
  src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
Comments