If your Angular Application is in need of google maps, here is the library that provides google maps components to Angular. It's quite easy to set up.

How to set up Angular Google Maps

npm install @agm/core --save

First before importing `AgmCoreModule` to your application, you'll need to get google maps API key. : https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key

Now that you have your google map api key, lets go ahead and import AgmCoreModule to our project .. 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 {} 

Next is to create our first google map. Open your `app.component.ts` edit it to reflect the below changes

import { Component } from '@angular/core'; 
@Component({ 
selector: 'app-root', 
templateUrl: 'app.component.html', 
styleUrls: ['app.component.css'], 
}) 
export class AppComponent { 
title: string = 'My first AGM project'; 
lat: number = 51.678418; 
lng: number = 7.809007; 
} 

And finally the template file `app.component.html`

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

<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Don't forget to add the following css to your `app.component.css` file.

.agm-map { height: 300px; } 

For more on this library: https://angular-maps.com/