title: How to load google maps api asynchronously in Angular2
body: <p>Usually in a plain javascript site, I can use the following script to reference google maps api and set the <code>callback</code> function with <code>initMap</code>.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script async defer src=&quot;https://maps.googleapis.com/maps/api/js?callback=initMap&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>What I observed is the <code>initMap</code> function in the plain javascript site is under the window scope, and it can be referenced in the script parameter settings - <code>?callback=initMap</code>, but once I write a component in angular2 with a component method called <code>initMap</code>, the <code>initMap</code> will be under the scope of my component. Then the async loading script I set up in the index will not be able to catch my component <code>initMap</code> method.</p>
  <h3>Specifically, I 'd like to know how to achieve the same thing in <code>Angular2</code>?</h3>
  <blockquote>
  <p>PS: I know there is an <code>angular2-google-maps</code> component available in <code>alpha</code> via <code>npm</code>, but it currently is shipped with limited capability, so I 'd like to know how to load it in an easier way without using another component so I can just use google maps api to implement my project.</p>
  </blockquote>