title: async loading javascript with document.write
body: <p>I am trying to async the google map api javascript.</p>
  
  <p>So, the normal script tag works <code>&lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;</code></p>
  
  <p>But, the following async version doesn't.</p>
  
  <pre><code>(function () {
      var gmap = document.createElement('script'); gmap.type = 'text/javascript'; gmap.async = true;
      gmap.src = 'https://maps.googleapis.com/maps/api/js?sensor=false';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gmap, s);
  })();
  </code></pre>
  
  <p>After some breakpoint+inspect action, I found out that this line doesn't run properly in the async mode.</p>
  
  <pre><code>document.write('&lt;' + 'script src="' + src + '"' + 
  ' type="text/javascript"&gt;&lt;' + '/script&gt;');
  </code></pre>
  
  <p>The document object in the sync mode is a "HTMLDocument", but in the async mode is a "#document" instead. Something happened to the document object after the page is loaded. Thoughts?</p>
  
  <p>Cheers.</p>
  
  <p><strong>Update:</strong> this question is more about why document.write is not fired rather than async load the google map api. If you set a breakpoint on this line, you can see document.write function exists. Does this have anything to do with the fact that document.write is native?</p>