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

1. Node JS. To install node js please click here.
2. Angular CLI to install angular cli in your system follow this article.
3. 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