In this tutorial, we will learn how to integrate google places or address autocomplete in angular 14 Application without showing google maps. To integrate google location or auto complete address in Angular 14 application without displaying google map we follow these steps
Execute the following command on terminal to create your angular app using bellow command:
ng new myNewApp
Execute the following command on terminal to install ngx-google-places-autocomplete; as follows:
For npm:
npm install ngx-google-places-autocomplete
For yarn:
yarn add ngx-google-places-autocomplete
In this step, you need to get google api key; So, first, you have to have the Maps API Key, and you can go here to get the complete instructions.
Then visit src/app directory and open app.module.ts file and import the following library into it; as follows:
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 { }
Create autocomplete html in view file; so Open app.component.html file and add the following HTML markup on it:
<div class="container">
<h1>Codequs</h1>
<h2>Google Places Autocomplete</h2>
<input ngx-google-places-autocomplete [options]=
'options' (onAddressChange)="AddressChange($event)"/>
{{ formattedaddress }}
</div>
And add library to your index.html in src of your project app; as follows:
<script src=”https://maps.googleapis.com/maps/api/js?key=<Your API KEY>&libraries=places&language=en”></script>
app.component.ts
Visit src/app direcory and open app.component.ts file and import the following modules into it; as follows:
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 the application using ng serve –o and you should see Google autocomplete search in your browser.
Happy Coding !!!