Install @agm/core using npm

@agm/core

npm install @agm/core --save

You neeed to provide a Google Maps API key to be able to see a Map. Please follow steps provided in the below link to get an API key:

https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key

Add AgmCoreModule into your MapsModule class. maps.module.ts would look like this

import { NgModule } from '@angular/core';
import { CommonModule } from "@angular/common";
import { AgmCoreModule } from '@agm/core';
import { GoogleMapComponent } from "./google-map/google-map.component";

@NgModule({
imports: [
    AgmCoreModule.forRoot({
        apiKey: 'YOUR_KEY'
    })
],
declarations: [GoogleMapComponent],
providers: [ ]
})
export class MapsModule { }
            

google-map.component.ts would look like this

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

@Component({
    selector: 'app-google-map',
    templateUrl: './google-map.component.html',
    styleUrls: ['./google-map.component.scss'],
})

export class GoogleMapComponent {

    lat: number = 51.678418;
    lng: number = 7.809007;

}
            

google-map.component.html would look like this

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

It is really important that you define a height component `agm-map`. Otherwise, you won't see a map on the page!. google-map.component.scss would look like this

agm-map {
    height: 300px;
}