title: Angular2 GoogleMapAPI AutoComplete Error Cannot read property 'Autocomplete'
body: <p>I want to use GoogleMapAPI auto-complete in angularjs2 and onsenUI2, but I can't do that.</p>
  
  <p>This is my code:</p>
  
  <pre><code>import { Component, NgModule, OnInit, ViewChild, ElementRef } from '@angular/core';
  import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
  import { BrowserModule } from "@angular/platform-browser";
  import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core';
  // import {GoogleplaceDirective} from '../googleplace.directive';
  import {NgModel} from '@angular/forms';
  
  @Component({
   selector: 'app-root',
   styles: [`
     .sebm-google-map-container {
     height: 300px;
   }
   `],
   template: `
    &lt;google-search-bar&gt;&lt;/google-search-bar&gt;
    &lt;div class="container"&gt;
    &lt;div class="form-group"&gt;
    &lt;input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl"&gt;
   &lt;/div&gt;
   &lt;sebm-google-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom"&gt;
    &lt;sebm-google-map-marker [latitude]="latitude" [longitude]="longitude"&gt;&lt;/sebm-google-map-marker&gt;
  &lt;/sebm-google-map&gt;
  &lt;/div&gt;
  `})
  
  export class GoogleMap implements OnInit {
  
   public latitude: number;
   public longitude: number;
   public searchControl: FormControl;
   public zoom: number;
   public fuzzyControl: FormControl;
   public address:string;
  
   @ViewChild("search")
   public searchElementRef: ElementRef;
  
   constructor(
     private mapsAPILoader: MapsAPILoader
   ) {}
  
  ngOnInit() {
  //set google maps defaults
  this.zoom = 4;
  this.latitude = 39.8282;
  this.longitude = -98.5795;
  
  //create search FormControl
  this.searchControl = new FormControl();
  this.fuzzyControl = new FormControl();
  
  //set current position
  this.setCurrentPosition();
  this.setMapsAPILoader();
  
  //load Places Autocomplete
  this.mapsAPILoader.load().then(() =&gt; {
    let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
      types: ["address"]
    });
    autocomplete.addListener("place_changed", () =&gt; {
      //get the place result
      let place: google.maps.places.PlaceResult = autocomplete.getPlace();
  
      //set latitude and longitude
      this.latitude = place.geometry.location.lat();
      this.longitude = place.geometry.location.lng();
    });
  });
  }
  
  private setCurrentPosition() {
   if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition((position) =&gt; {
      this.latitude = position.coords.latitude;
      this.longitude = position.coords.longitude;
      this.zoom = 12;
    });
  }
  }
  </code></pre>
  
  <p>This is Error</p>
  
  <pre><code>Unhandled Promise rejection: Cannot read property 'Autocomplete' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'Autocomplete' of undefined(…) TypeError: Cannot read property 'Autocomplete' of undefined
  </code></pre>