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.
Install Node JS
Angular CLI to install angular cli in your system follow this article.
Bootstrap 4. to install bootstrap click here.
1) Create Angular App. If you dont know how to start with angular. Follow this article How to install angular app in windows operating system.
2) Install Bootstrap 4 using this article How to install bootstrap 4 in angular
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.