title: My google map won't load even though my function is in the global scope
body: <p>I am having a bit of an issue getting a google map to display on my page. I looked up the answer and found something similar that pointed me on the right track (making my function globally accessible) but after I did that, I still receive the following error <a href="https://i.stack.imgur.com/HQG0i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HQG0i.png" alt="Error Message"></a></p>
  
  <p>I'm not exactly sure what I've done wrong here. Below is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Dateandtime&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/foundation.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="columns small-12"&gt;
              &lt;ul class="menu"&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://carter3689.tumblr.com/"&gt;Blog&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;   
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
  
      &lt;div class="columns small-12" id="map" style="height:100%"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  
      &lt;div id="map"&gt;&lt;/div&gt;
  &lt;script src="js/maps.js" &gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZMmJXCp7-bYmXDcd-a6UFWi9mBVAPy4s&amp;callback=initMap" async defer&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>    var map;
  window.initMap = function() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated! Thanks</p>