Advertisements

Add Google Map in Angular Application

Advertisements

Google Map is a google service which helps us to locate shops, events, addresses, places, route path etc. Sometimes, In our angular application we wants to add google map. So, here we will see a angular module which helps us to add google map in angular application. The Angular Google Maps (AGM) package details is given here.

Create an Angular project

First if you haven’t installed Angular CLI yet, please run the following command first:

npm install -g @angular/cli

Now, Run the following commands to create a new Angular project with Angular CLI:

ng new google-map-project
cd google-map-project

Install Angular Google Maps Module

npm install @agm/core

Import AGM Module

Open src/app/app.module.ts and import the AgmCoreModule. Here you need to provide a Google Maps API key. You can get an API key here.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: ''
    })
  ],
  providers: [],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Include Google Map in Angular Template

Open the file src/app/app.component.html and paste the following content:

<agm-map [latitude]="lat" [longitude]="lng" >
  <agm-marker [latitude]="lat" [longitude]="lng">
    <agm-info-window>RMC</agm-info-window>
  </agm-marker>
</agm-map>

Open the file src/app/app.component.ts and define the variables.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  lat = 52.668418;
  lng = 48.829007;
}

Styling the Google Map in Angular

Open the file src/app/app.component.css and give height to map:

agm-map {
  height: 300px;
}

Testing:

Run the following command in the project root folder

ng serve

Open the following URL in your browser: http://localhost:4200/

Now, you can add google map in angular application and apply designs as you want.


Recommended

How to Create Multiple Parameters Dynamic Routes in Laravel

Laravel 8 Multiple Database and Resource Routes with Controllers

Optimize Database Queries in Laravel

Flash Messages in AngularJS

Create REST API in Node.js

Create Filters in AngularJS

How to make custom google map design in javascript

How to create google map in javascript

For more Angular Tutorials

If you like this, share this.

Follow us on FacebookTwitterTumblrLinkedInYouTube