Purpose of the Article: To help Angular developers to implement Google Maps in Angular Applications
Intended Audience: Angular Developers
Tools and Technology: Angular, Google cloud platform, Google maps library
Keywords: Google Maps, AGM
In this blog, I will explain the following topics:
- What is Angular?
- What is Google Maps?
- What is Angular Google Maps (AGM)?
- Google Maps Integration in Angular using AGM.
Pre-requisites:
- Angular 12
- Angular Google Maps (AGM) library
- Google Maps API key
Angular:
- Angular is a framework developed by Google for building single-page applications using HTML and TypeScript.
- Building accessible applications is one of the breakthrough capabilities of Angular.
- Angular is a collection of well-integrated libraries such as routing, forms management, client-server communication, and more.
- The loading time of Angular apps is faster than any other front-end framework in the industry.
Google Maps:
- Google Maps is a web service that provides detailed information about geographical regions and sites worldwide.
- Google Maps offers “Street Views,” photos of the streets and surroundings. Millions of websites use Google Maps for directions to stores and offices.
Angular Google Maps (AGM):
- Angular Google Maps is a map service provided by Google.
- Angular Google Maps allows developers to show locations on Google Maps and information about places in the content window.
- Angular Google Maps are the components that provide Angular applications with tools to utilize the google maps API key.
- AGM provides a Geocoder, which will help us fetch the marker’s address.
API key:
- A Google Maps API key is a unique identifier provided by Google to access Google Maps in the project. Google uses an API key to authenticate the requests for usage.
Creating Google Maps API key:
- To generate the Google Maps API key, first, we need a google account
- Sign-In to the google cloud console (https://console.cloud.google.com)
- Click on API & services from the side menu -> Create a new project
- Enter the Project Name and click the Create button; it will create the project
- Open the created project and navigate to API services a Libraries -> Enable the Directions API and Geolocation API.
- Navigate to APIs & Services a Credentials a Create credentials a Select -> API key
- API key is created. Copy the API key and save it for project use.
Installation of Angular Google Maps library:
Step 1:
- Install the npm package
- Install the AGM package with the latest version
- npm install @agm/core
- npm i @types/googlemaps@3.39.13
Step 2:
- Import Angular Google Maps module app.module.ts
- import {AgmCoreModule} from ‘@agm/core’
- Add like below in the Imports array:
AgmCoreModule. forRoot ({apikey: ‘PASTE-YOUR-API-KEY-HERE’})]
Step 3:
- The code shown in the picture below shows the current location and latitude and longitude values of the current site
Step 4:
- Configure the user interface by setting up the HTML template in app.component.html
Step 5:
- Style using CSS in app.component.css
Enter the below command in CLI to run the project:
- Ng serve -o
Output:
- The marker in the output indicates the current location
- In the bottom left corner, it shows the latitude and longitude values of the current location
Author Bio:
Poojitha Pancheti
Senior Analyst - Analytics
She has 2 years of professional experience in Microsoft technologies like C#, ASP. API's using both SOAP and REST architectures. Her interests also include creating interactive web application and single page application using Angular.
