title: Loading Google Places Autocomplete Async Angular 2
body: <p>I am trying to instantiate a Google Places Autocomplete input within an Angular 2 component.  I use this code to do it:</p>
  
  <pre><code>loadGoogle() {
      let autocomplete = new google.maps.places.Autocomplete((this.ref.nativeElement), { types: ['geocode'] });
      let that = this
      //add event listener to google autocomplete and capture address input
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        let place = autocomplete.getPlace();
        that.place = place;
        that.placesearch = jQuery('#pac-input').val();
      });
      autocomplete.addListener()
    }
  </code></pre>
  
  <p>Normally, I believe, I would use the callback function provided by the Google API to ensure that it is loaded before this function runs, but I do not have access to it within a component's scope.  I am able to load the autocomplete input 90% of the time, but on slower connections I sometimes error out with </p>
  
  <pre><code>google is not defined
  </code></pre>
  
  <p>Has anyone figured out how to ensure the Google API is loaded within a component before instantiating.  </p>