Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

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.
angular   google map   google location   javascript   agm core  

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

Hit Like

Hit like for this post

Here About Author
Author Image
Pro Code Programming

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

0replies
Leave a reply
46
Registerd Users
87
Total Subscribers
59
Total Articles
38915
Total Views