How to Add Google Locations Autocomplete to your Angular Application ? - GeeksforGeeks

05 Jun, 2020
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.
This module is a wrapper for Google Places Autocomplete js library. It allows us to integrate locations autocomplete to our project.
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.
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. 
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 for GooglePlaceModuleimport { GooglePlaceModule } from "ngx-google-places-autocomplete";  @NgModule({  declarations: [    AppComponent,  ],  imports: [    BrowserModule,    //Adding to imports    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';  //Local Variable defined  formattedaddress=" ";  options={    componentRestrictions:{      country:["AU"]    }  }  public AddressChange(address: any) {  //setting address from API to local variable   this.formattedaddress=address.formatted_address}}
Run development server using ng serve and write some location to input field to see Autocomplete locations.
AngularJS-Misc
TypeScript
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
Angular PrimeNG Messages Component
How to bundle an Angular app for production?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?