title: Google maps API can't find a callback defined in $(document).ready
body: <p>I have a problem with Jquery and Google Maps API.</p>
  
  <p>Scripts seem to be located correctly in html</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&amp;callback=initMap"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The problem is that init map is inside $(document).ready</p>
  
  <pre><code>$(document).ready(function () {
      let url = "ws://localhost:61614/";
      let topic = "stomp.topic";
      let client;
  
      let map, trackers = {};
  
      $("#connect_button").click(function () {
          connect(url);
          return false;
      });
  
      $("#disconnect_button").click(function () {
          disconnect();
          return false;
      });
  
      function initMap() {
          let mapOptions = {
              zoom: 8,
              center: new google.maps.LatLng(30, 0),
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById("map"), mapOptions)
  
      }
  }
  </code></pre>
  
  <p>How correctly initMap must be accessed ?</p>