How to Add Google Locations Autocomplete to your Angular Application ?

Last Updated : 07 Mar, 2024

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 for GooglePlaceModule 
import { 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 
} 
} 