title: Moving google maps api code to separate file + jquery
body: <p>This time, i'll go right to the point:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="code.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=*snip*&amp;callback=initMap"&gt;
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Code.js:</strong></p>
  
  <pre><code>$(document).ready(function () {
      var map;
  
      function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
              center: {
                  lat: -34.397,
                  lng: 150.644
              },
              zoom: 10
          });
      }
  });
  </code></pre>
  
  <p><strong>Result:</strong></p>
  
  <pre><code>Uncaught TypeError: window.initMap is not a function.
  </code></pre>
  
  <p>Tips?</p>
  
  <p>Also, wonder if this part:</p>
  
  <pre><code>&lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=*snip*&amp;callback=initMap"&gt;
  </code></pre>
  
  <p>Can be moved to the same code.js file.</p>