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

This is another angular 4 tutorial that helps to add Angular Google Map module. This angular4 map tutorial help to find city name using reverse geocoding and display city name into map, which is defined by a latitude and a longitude. The AGM has a Zoom level for map, the zoom value varies between 1 and 20, 20 being the most zoomed-in value, and 1 being the most zoomed-out.

The Angular Google Maps (AGM) is angular component for google map. AGM is very easy-to-use and easy-to-understand component for google map. You need to access google api to get geo location.I am creating a reverse Geocoding angular application using angular 4 and agm module.

We will get lat and lang value of city and passed to agm component, The component will find the location of provided longitude and latitude using Angular Google Map(AGM). The angular 4 has Angular Google Map(agm) packages inbuilt into the core module. You can access AGM module using the below code,

import { AgmCoreModule } from '@agm/core';

Let’s Start Google MAP Integration with Angular4

We will create angular 4 apps using angular CLI like below,
ng new angular-4-reverse-google-map

We will install Angular Google Map(AGM) components using npm,
npm install @agm/core --save

We will include AGM module into app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'GOOLE MAP API KEY'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

We had imported AGM module and set google api key, You can generate google map api key from Here.

We will add agm component into app.component.html file,

Google maps reverse geocoding With Angular 8/9

agm-map component used to display maps and agm-marker used to display marker into city name. We will pass lat and lang variables from the component file into AGM directive.

We will set lat and lng value into app.component.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  lat: number = 39.742043;
  lng: number = -104.991531;
}

Output: