title: Jquery undefined in google maps callback function
body: <p>My html code looks like this:</p>
  
  <p>I get an error that <code>$</code> is <code>undefined</code>.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;script src="./jquery.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function initialize() {
              var input = document.getElementById('where');
              $(input).on('focus', function() { 
              selected = false;
          });
  }
  &lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=blablabla&amp;libraries=places&amp;language=en&amp;region=CA&amp;callback=initialize" async defer&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried removing the <code>async defer</code>, but <code>$</code> stays <code>undefined</code>.</p>
  
  <p>I tried changing the <code>function initialize()</code> for <code>var initialize = function()</code>, but <code>$</code> stays <code>undefined</code>.</p>
  
  <p>I tried both, but <code>$</code> stays <code>undefined</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/o5iaU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o5iaU.png" alt="enter image description here"></a></p>