title: How to wait till the google maps API has loaded before loading a google.maps.OverlayView derived class
body: <p>I have a separate label.js file in which I have defined a custom overlay. It uses the google.maps.OverlayView as its prototype:</p>
  
  <pre><code>Label.prototype = new google.maps.OverlayView();
  </code></pre>
  
  <p>I am not sure where to place the script tags for this js file in my index.html file. If I place the script tags below the google maps loading tag like so:</p>
  
  <pre><code>....
          &lt;script async defer
              src="https://maps.googleapis.com/maps/api/js?...
          &lt;/script&gt;
          &lt;script src="js/label.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The label.js file is loaded immediately while the maps api has not yet loaded causing an error.</p>
  
  <p>I currently solve this by manually loading the JS in my maps loaded callback:</p>
  
  <pre><code>function initMap() {
      gMap = new google.maps.Map(document.getElementById(strMapDivName), {
          center: {lat: 21, lng: 78},
          mapTypeId: google.maps.MapTypeId.HYBRID,
          zoom: 6,
          heading: 90,
          tilt: 0
      });
  
      // Load label.js afterwards so we can be sure that the google maps api has loaded
      var fileref=document.createElement('script')
      fileref.setAttribute("type","text/javascript")
      fileref.setAttribute("src", "js/label.js")
  
      document.getElementsByTagName("head")[0].appendChild(fileref)
  
  }
  </code></pre>
  
  <p>Is this the best way to solve this?</p>