google map Archives

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: }) ], providers: , bootstrap: }) 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, Google Maps Address Finder Enter Location Address of the location: Lat: Lng: City: State: Country: Country initials: Zipcode State initials 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: }) 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.

google map

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

Google MAP Reverse Geocoding Example Using AGM and Angular 8/9