ZombieChowder ZombieChowder - 1 year ago 472
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:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script async defer
<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">
<div id ="map-canvas"> </div>

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()
    window.initMap = function()

  2. Delete everything in
    and giving it
    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 :


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

Answer Source

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 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download