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 { MapsComponent } from './maps/maps.component';

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

maps.component.ts would look like this

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

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

export class  MapsComponent {
    
    lat = -12.046374;
  lng =  -77.042793;

}
            

maps.component.html would look like this

                                
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [zoomControl]="false" [scrollwheel]="null">
    <agm-marker *ngFor="let m of markers" [latitude]="m.lat" [longitude]="m.lng" [label]="m.label"
    (dragEnd)="markerDragEnd(m, $event)"></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;
}