title: Uncaught TypeError: Cannot read property 'firstChild' of null (Google maps failing to load)
body: <p>I was wondering if someone would be able to lend me their knowledge involving the Google Maps API. I've read similar questions and still haven't been able to come up with an answer. As the title says the error showing up in my browser console is:</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'firstChild' of null</code></p>
  
  <p>I understand that this means there is an issue with the way values are being passed around; Following is my relevant code snippets where <code>sources</code> points to in Chrome:</p>
  
  <pre><code>// --- Global Variable
  var map;
  
  
  // --- View Model.
  function AppViewModel() {
  
    // Initial Map
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 39.305, long: -76.617},
      zoom: 12
    });
  
  
  // --- Initalize Application.
  function initApp() {
    ko.applybindings(new AppViewModel());
  }
  </code></pre>
  
  <p>The error appears to be thrown when Google Maps attempts to load. Does anyone have an idea as to what I'm doing wrong here? Thanks for any help offered.</p>
  
  <p>Html for reference:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Bolton Hill Neighborhood Map&lt;/title&gt;
    &lt;link rel="stylesheet" href="static/main.css"&gt;
    &lt;meta name="viewport" content"width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div class='map'&gt;maps error&lt;/div&gt;
  
    &lt;script src="./js/knockout.js"&gt;&lt;/script&gt;
    &lt;script src="./js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="./js/app.js"&gt;&lt;/script&gt;
    &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&amp;callback=initApp" onerror="errorHandler"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>