How to Make an Autocomplete Address Fields with Angular Google Maps Api

This is another angular 13 tutorial that helps to create an address auto-fill form using google API, We will create a contact-us form that will have an Address field, When typing it will autocomplete the address entered there.

I have already shared Google MAP Reverse Geocoding Example Using AGM and Angular 4/5 tutorial.Google maps API v3 now provides address auto-completion, lets’ plan to start to integrate angular google map module.

I am using following files and folder:

• package.json : This file is used to add third party libs like we will add bootstrap 4 package information.
• .angular-cli.json : I will add ag-grid css and js files path here.
• src/index.html: This file is used for address form container wrapper.
• src/app/app.module.ts : We will use this file to import module.
• src/app/app.component.ts : We will use to define google map component and configuration of agm module.

I am assuming, You have created a sample app of angular 13, if not till now, please create and get help from Getting started with angular tutorial.

Autofill Address Form Using Angular 13

We will include agm module into application, I am assuming you have created basic angular app, if not please run the below command to create angular 13 application,

ng new agm-example

I will split all the details of formatted address like City, State, Country and Zip code, So when you start typing your street name and select any option from search address field, Then we will fill street name into street field, city name into city field and all other fields like state, country and zip code will fill automatically.

We will run below command to install agm module using npm command,
npm install google-maps-ng2 --save

We will install typescript angular google map using npm,
npm install @types/googlemaps --save

We will open app.module.ts file and wrote below code into this file,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    AgmCoreModule.forRoot(  {
      apiKey: 'API KEy',
	   libraries: ["places"]
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


imported packages of AgmCoreModule and FormsModule, I have also passed the google map api key into AgmCoreModule.

We will open app.component.html file and added below files,

<form method="post">
<div class="jumbotron text-center">
<h1>Google Maps Address Finder</h1>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group"><label>Enter Location</label> <input id="autocomplete" class="form-control mr-sm-4" spellcheck="off" type="text" width="784px" placeholder="Search for the Location"></div>
<div class="form-group"><label>Address of the location:</label> <input class="form-control mr-sm-4" disabled="disabled" type="text" width="784px" placeholder="{{f_addr}}"></div>
</div>
<div class="col-sm-4">
<div class="form-group"><label for="text">Lat:</label> <input class="form-control" disabled="disabled" type="password" placeholder=" {{ latitude}}"></div>
<div class="form-group"><label for="text">Lng:</label> <input class="form-control" disabled="disabled" type="text" placeholder=" {{ longitude}}"></div>
</div>
<div class="col-sm-4">
<div class="form-group"><label>City:</label> <input class="form-control" disabled="disabled" type="text" placeholder="{{city}}"></div>
<div class="form-group"><label>State:</label> <input class="form-control" disabled="disabled" type="text" placeholder="{{state}}"></div>
</div>
<div class="col-sm-4">
<div class="form-group"><label>Country:</label> <input class="form-control" disabled="disabled" type="text" placeholder="{{country}}"></div>
<div class="form-group"><label>Country initials:</label> <input class="form-control" disabled="disabled" type="text" placeholder="{{scountry}}"></div>
</div>
<div class="col-sm-4">
<div class="form-group"><label for="text">Zipcode</label> <input class="form-control" disabled="disabled" type="password" placeholder=" {{ postCode}}"></div>
<div class="form-group"><label for="text">State initials</label> <input class="form-control" disabled="disabled" type="text" placeholder=" {{ estab}}"></div>
</div>
</div>
</form>

I have used agm-map component to show map address, added search autocomplete input box using #search, the street field will contain street, city filed contain city name, state fields contain the state name, the country field name filled with the country name etc.

We will add dependency module into app.component.ts file.

import { Component, OnInit, Input } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import {} from '@types/googlemaps';
import { ViewChild, ElementRef, NgZone, } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})

We have initialize class level variable and define instance into constructor, Added below code into app.component.ts file.

export class AppComponent {
	public latitude: number;
	public longitude: number;
	public fillInAddress: '';
	public searchControl: FormControl;
	public zoom: number;
	public f_addr: string;
	public city: string; 
	public country: string;
	public scountry: string; 
	public postCode: string; 
	public estab: string; 
	public state: string; 
	@ViewChild('search' ) public searchElement: ElementRef;

	constructor(private mapsAPILoader: MapsAPILoader, private ngZone: NgZone) {  }
	
	}

Let’s set a default address using setCurrentPosition() method,

private setCurrentPosition() {
		if ("geolocation" in navigator) {
			navigator.geolocation.getCurrentPosition((position) => {
				this.latitude = position.coords.latitude;
				this.longitude = position.coords.longitude;
				this.zoom = 12;
			});



		}
	}

In the above code, We are fetching address based on user entered keyword, when the user selected one address, We will get formatted address from angular google map api in json response.We will iterate on response object and filled address fields based on response key name.