Demo: https://ngx-gp-autocomplete.angularmagic.com
This module is a wrapper for Google Places Autocomplete js library. Initial code base was copied from this project ngx-google-places-autocomplete, this module applies some fixes and improvements. Like @types/google.maps and @googlemaps/js-api-loader
npm install -S @angular-magic/ngx-gp-autocomplete
npm install -S @googlemaps/js-api-loader
npm install -D @types/google.maps- Import NgxGpAutocompleteModule into your application module
import { NgxGpAutocompleteModule } from "@angular-magic/ngx-gp-autocomplete";
@NgModule({
imports: [
NgxGpAutocompleteModule,
BrowserModule,
FormsModule,
//...
],
providers: [
{
provide: Loader,
useValue: new Loader({
apiKey: 'AIzaSyAFaylOBsuhYPYw9YqWmhN370xTvc6DXYU',
libraries: ['places']
})
},
//...
],
//...
})-
Replace YOUR_API_KEY with google places api key. Ref - https://developers.google.com/places/web-service/get-api-key
-
Add directive ngx-gp-autocomplete to your input field (options is an optional parameter)
<input #placesRef="ngx-places" ngx-gp-autocomplete [options]='options' (onAddressChange)="handleAddressChange($event)"/>- Additionally you can reference directive in your component
export class Component {
@ViewChild('ngxPlaces') placesRef: NgxGpAutocompleteDirective;
public handleAddressChange(place: google.maps.places.PlaceResult) {
// Do some stuff
}
}Please feel free to declare issues or contribute: https://github.com/angular-magic/ngx-gp-autocomplete
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent