How to Add Google Locations Autocomplete to your Angular Application ?
The task here is to Add Google Locations Autocomplete to your Angular Application. When user will enter some text for a location in the Textfield, he/she will get locations recommendations and can autocomplete the location. For achieving the target, we will use ngx-google-places-autocomplete angular package.
What is ngx-google-places-autocomplete ?
This module is a wrapper for Google Places Autocomplete js library. It allows us to integrate locations autocomplete to our project.
Approach
- First install ngx-google-places-autocomplete to your angular project>
For npm:
npm install ngx-google-places-autocomplete
For yarn:
yarn add ngx-google-places-autocomplete
- Add library to your index.html in src of your project app.
<script src=”https://maps.googleapis.com/maps/api/js?key=<Your API KEY>&libraries=places&language=en”></script>
- Generate an API Key and place that API Key in above script tag in place of <Your API KEY>.
- To Generate an API key follow the below steps:
- Go to https://developers.google.com/places/web-service/get-api-key and follow all the steps to create an API key.
- Enable Places API for your API Key.
- Make sure your API is enabled, to enable your API follow the steps from this link https://support.google.com/googleapi/answer/6158841?hl=en.
- Do necessary imports of GooglePlaceModule in app.module.ts.
import { GooglePlaceModule } from "ngx-google-places-autocomplete";
@NgModule({
imports: [
GooglePlaceModule
],
- In HTML file for appcomponent. Define code for input field, in that input field user defined function AddressChange() will be called by (onAddressChange) passing $event and options will take care of country set in country array of component.ts file.
- In component.ts file , user defined function take formatted_address from $event address which is then used to set address in input field by interpolation binding.
Note: In country Array there is “AU” added for Australia, you can add any other country according to you.
Implementation:
app.module.ts
Javascript
import { BrowserModule } from '@angular/platform-browser' ;
import { NgModule } from '@angular/core' ;
import { RouterModule } from '@angular/router' ;
import { AppComponent } from './app.component' ;
import '@angular/compiler' ;
import { GooglePlaceModule } from "ngx-google-places-autocomplete" ;
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
GooglePlaceModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
app.component.html
HTML
< div class = "container" >
< h1 >GeeksforGeeks</ h1 >
< h2 >Google Places Autocomplete</ h2 >
< input ngx-google-places-autocomplete [options]=
'options' (onAddressChange)="AddressChange($event)"/>
{{ formattedaddress }}
</ div >
|
app.component.ts
Javascript
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
title = 'rou' ;
formattedaddress= " " ;
options={
componentRestrictions:{
country:[ "AU" ]
}
}
public AddressChange(address: any) {
this .formattedaddress=address.formatted_address
}
}
|
Output:
Run development server using ng serve and write some location to input field to see Autocomplete locations.
Last Updated :
07 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...