Angular 2 Google Place Map Library Auto Complete

Output

Usage

  npm install --save angular2-google-place

Add following library in your index.html

  <script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=API_KEY"></script>

You need to replace the key in above library with your own google api key. You can generate key from here : Generate Key

You also need to enable Google Places API Web Service from google developer Console.

Add GooglePlaceModule in your NgModule imports file

import {GooglePlaceModule} from "angular2-google-place"

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    GooglePlaceModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Use google place directive like below

<input type="text" [(ngModel)]="address"  (setAddress)="getAddress($event)" googleplace/>