About Us
IDKBlogs

  All  
Javascript
NodeJS
AngularJS
Angular2+
ReactJS
Others

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

Integrate @agm/core and show circle over the map on selected region

  idkblogs.com      August 15, 2020

Shubham Verma

Shubham Verma


Integrate Angular Google Map (@agm/core) module and show circle over the map 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

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

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

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.

Let's 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:
after importing the above lines (AgmCoreModule & AgmDirectionModule), you need to add these module in imports[] as:
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:

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

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:


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 location marker in Angular 9 application

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.


Thank you

for taking the time to read this article. If you’re interested in Node.js or JavaScript this link will help you a lot.



Copyright © 2020 IDKBlogs | All Right Reserved

About Us

Powered by : IDKBlogs

Last Update : 19/09/2020