Google Map in Angular 6

Getting Started

We start by creating a project with Angular CLI. Angular CLI makes it easy to create an application that already works and allows you to follow the best practices. I you haven’t installed Angular CLI yet, please run the following command first:

npm install -g @angular/cli

ng new agm-project

cd agm-project

Setting up Angular Google Maps

First and foremost, in order to do any kind of interaction with the Maps API, you need an API key from Google. Follow the instructions  Google Map API key

Install and configure Angular Google Maps

From your project folder, run the following command:

npm i @agm/core --save

Add agmcore module entry in  app.module.ts

 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_KEY'
    })
  ],
  providers: [],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule {}

Angular CLI already created an app component the we’ll now use to create our first google map. Open the file src/app/app.component.ts and modify it like below:

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title: string = 'Google Map';
  lat: number = 51.678418;
  lng: number = 7.809007;
}

Setup the template

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

app.component.html 

<h1>{{ title }}</h1>

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

Now in your templates you can include the map component.

Note: you must explicitly set the height of the agm-map element in CSS otherwise it will not show up on screen.

Setup the CSS file

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

app.component.css

agm-map {
  height: 300px;
}

   
And there you have it! It really is that simple to get it set up. However, there are a host of other options and components that you can use to enrich the Google Maps experience.

Let me know in comments for any issue you are facing.