Share with
Add google maps with add marker getting current location using @agm/core module in angular framework
How to used google map into angular 8 | 9 using third party @agm/core module package. Helps to integrate the google map with displaying google marker to current location. Get current location and set marker to that current location.
Google Maps
Google maps are used to get or set location using marker in map. This application we can used in angular 4+ version using package @Agm/Core module. By installing this we can integrate google map into our angular website.
Prerequisite
- Node JS. To install node js please click here.
- Angular CLI to install angular cli in your system follow this article.
- Bootstrap 4. to install bootstrap click here.
Example for Google Map
1) Create Angular App. If you dont know how to start with angular. Follow this article How to install angular 8 in windows operating system.
2) Install Bootstrap 4 using this article How to install bootstrap 4 in angular 9 | 8 | 7 | 6 | 5 | 4
3) Install Angular Google Maps
npm install @agm/core --save
4) Import @agm/core module to app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AgmCoreModule.forRoot({
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
libraries: ['places']
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Get API Key from google api. If you don't know how to get google api key click here to follow the article.
5) Now add simple google map to your html template to app.component.html file
// src > app > app.component.html
<div class="googlemap"><!-- app.component.html --><agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom"><agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker></agm-map>
</div>
agm-map is google map component which display google map on your website. Latitude and Longitude is used for getting your current location or set the exact location to map. Using Zoom we can display specific distance area into the google map using red circle so we can check the available locations under the specific distance area.
agm-marker component is used to place the location marker to the map.
6) Add CSS for google map html template
// src > app > app.component.css
agm-map {
height: 500px;
}
.googlemap{
margin-top: 5%;
}
Its helps to display google map height into website
7) To get Google map services and to get current Geo location we need to add services into component typescript file
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
title: string = 'Google Map Project';
latitude: number;
longitude: number;
zoom:number;
ngOnInit() {
this.setCurrentLocation();
}
// Get Current Location Coordinates
private setCurrentLocation() {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 15;
});
}
}
}
For setting current location in map we used setCurrentLocation() method for getting current location it helps to get the current latitude and longitude.
Check the output of program
Leave a reply

Sign in to stay updated on your professional world.
Pro Code Programming
Share and learn to code!
Programming articles, which helps you to build your application.
If something you are stuck to code and complete the program, just find here your quetion related articles.
New to Pro Code Programming?