Let’s get started

We are going to use the package AGM(Angular Google Map), this package is very matured and with less overhead and more functionality. In this part, we are going to add google map and place marker w.r.t location details we have.
so let's start step by step

Step 1: Create An Angular CLI Project
We start by creating a project with Angular CLI. Angular CLI makes it easy to create an application that already works and allows you to follow the best practices. please run the following command to install Angular CLI.

npm install -g @angular/cli

Run the following commands to create a new Angular project.

ng g new angular-map
cd angular-map

Setting up Angular Google Maps

Step 2: Install Angular Google Maps Run Following command to install AGM

npm install @agm/core

Step 3: Setup NgModule Open src/app/app.module.ts and import the AgmCoreModule
Note: You need to provide a Google Maps API key to be able to see a map. Get an API key here.

Step 3: Install Google Map Types

Next open tsconfig.app.json and write the following in “types” array.

This is how our setup completed. Move to next part

Step 4: Code for a map

Open any component Html file where you want to show map
I’m opening app.component.html file and follow the code below.

Let's describe the above code!
where ever you want to show the google map you need to write
<agm-map></agm-map> this is the main selector for the map.

Inputs provided in <agm-map>:

• latitude
  provide latitude of a location

• longitude
  provide longitude of a location

• zoom
  this input will zoom your location as per requirement
  zoom has levels:
  1: World
  5: Landmass/continent
  10: City
  15: Streets
  20: Buildings
  to follow numbers we can manage zoom levels

• (mapClick)
  this directive function will work when we click on a map anywhere
  it results in latitude and longitude of the location we clicked.

• fullscreenControl
  this input gives you full-screen view, its take boolean

• mapTypeId
  two types of a map we can show using this input
  satellite: Displays the map as seen by satellite.
  normal: Default map showed by AGM.

Most important!!! → Add CSS height for agm-map . Write bellow in CSS file otherwise, you will not able to see your map.

Create Location interface as below

Finally, add Code for the map in map-component.ts

Add ‘Marker’ on the map pointing to the location.

Update your interface like below

You can add more than one marker, so it is an array in the interface of location.

Make the following changes in your HTML template.

Add marker code in a .ts file

You get the following output on your angular localhost

Conclusion

We learn how to install AGM and setup in angular, adding a google map and adding a marker.
Feel free to share your thoughts, comments, suggestions, spelling mistakes.

Thanks..!