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>



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

filter_none

edit
close

play_arrow

link
brightness_4
code

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 { }

chevron_right


app.component.html

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="container">
    <h1>GeeksforGeeks</h1>
    <h2>Google Places Autocomplete</h2>
<input ngx-google-places-autocomplete [options]=
   'options'  (onAddressChange)="AddressChange($event)"/>
{{ formattedaddress }}
</div>

chevron_right


app.component.ts

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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
}
}

chevron_right


Output:

Run development server using ng serve and write some location to input field to see Autocomplete locations.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.