Integrate Angular Google Map (@agm/core) module and show circle over the map in Angular application

Integrate Angular Google Map and show circle in Angular application

I

n this article, we will see how we'll integrate the angular-google-map module in our angular 9 app. We will create an app in angular 9 app and will integrate the AGM module and will show a circle of our given locations/area using angular-google-map. Let's read this article till end and follow the steps given below.

Before starting this, you need to install the Angular CLI in your machine, so if you haven't installed the Angular CLI then click here and install the angular CLI.

Let's get started:

Create an Angular 9 app:

In this step, we'll create an angular 9 app and later we will integrate the @agm/core module in our app and will write the code to show the location marker.
First we'll create an app using ng new utility. So run the below command to to create a demo angular app:

ng new agm-demo

Integrate Angular Google Map (@agm/core) module and show location marker in Angular 9 application

After the successful command, you can see there would be a directory created with name ang-demo.
run the below command to start your app:

cd  agm-demo

then run:

npm install

then run:

npm start

Integrate Angular Google Map (@agm/core) module and show location marker in Angular 9 application

Now open the browser and hit URL localhost:4200 and make sure your app is working as:

Integrate Angular Google Map (@agm/core) module and show location marker in Angular 9 application

Now your angular app is working and you need to integrate the angular google map in this app.

Integrate the Angular Google Map: @agm/core

Now install the agm module (@agm/core) by using below command:

npm install @agm/core --save

After the above command the @agm/core module would've been installed, you can check this module in your package.json file.
Now let's open your app in any IDE like VS Code. Now open file "src/app/app.module.ts" and import the below code:

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

after importing the above lines (AgmCoreModule & AgmDirectionModule), you need to add these module in imports[] as:

                          imports: [
                          BrowserModule,
                          AgmCoreModule.forRoot({apiKey: 'YOUR_GOOGLE_API_KEY'}),
                          ]
                          <pre><code class="language-javascript"><textarea readonly>
                          

you need to add your google api key, if you don't have your google api key the you can generate the google api key here.
See the complete code as:
app.module.ts:

                            import { BrowserModule } from '@angular/platform-browser';
                            import { NgModule } from '@angular/core';
                            import { AppComponent } from './app.component';
                            
                            import { AgmCoreModule } from '@agm/core';
                            
                            @NgModule({
                              declarations: [
                                AppComponent
                              ],
                              imports: [
                                BrowserModule,
                                AgmCoreModule.forRoot({apiKey: 'YOUR_GOOGLE_API_KEY'}),
                              ],
                              providers: [],
                              bootstrap: [AppComponent]
                            })
                            export class AppModule { }
                          

Now open the file "src/app/app.component.html" and write the below codes:

                            <agm-map 
                              [latitude]="lat"
                              [longitude]="lng"
                              [zoom]="zoom"
                              [disableDefaultUI]="false"
                              [zoomControl]="false"
                              (mapClick)="mapClicked($event)" 
                              [mapTypeControl]="true"
                            >
                            
                              <agm-circle [latitude]="lat" 
                                [longitude]="lng" 
                                [radius]="10000"
                                [fillColor]="'red'"
                                [circleDraggable]="true"
                                [editable]="true"
                              >
                              </agm-circle>
                            </agm-map>
                          

Here you are done with your html, Now it's time to write the code for component. So open the file "src/app/app.component.ts" and write the below codes:

                            import { Component } from '@angular/core';
                            import { MouseEvent } from '@agm/core';
                            
                            @Component({
                              selector: 'app-root',
                              templateUrl: './app.component.html',
                              styleUrls: ['./app.component.css']
                            })
                    
                            export class AppComponent {
                            
                              zoom: number = 10;
                              lat: number = 26.4499;
                              lng: number = 80.3319;
                            
                              clickedMarker(label: string, index: number) {
                                console.log(`clicked the marker: ${label || index}`)
                              }
                    
                              mapClicked($event: MouseEvent) {
                              }
                            }
                          

Here you go, You are done with the implementations, its time to run the app and see the result.
Run the below command:

npm start

Now open your browser and hit the below URL:

localhost:4200

and see the result as:

Integrate Angular Google Map (@agm/core) module and show area circle in Angular 9 application

Now your angular app is working and you need to integrate the angular google map in this app. Enjoy your angular map.

---

Conclusion:

In this app, we learned about the agm module and also learned implementation of @agm/core (Angular Google Map).
Also we implemented the agm-circle in our component and shown the circle over the selected area on the map.
Also we learned, how we can install the Angular CLI.