Angular - Google is not defined?

Removing the async and defer attributes worked for me, but not sure it's wise to do keeping performance aspect of the website in mind.

so your script tag should look like:

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxx">

You have to wait the view initialization before loading the google maps script. You can do it with the AfterViewInit hook, like this :

import {AfterViewInit, Component} from '@angular/core';
...
export class YourComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    // Load google maps script after view init
    const DSLScript = document.createElement('script');
    DSLScript.src = 'https://maps.googleapis.com/maps/api/js?key=xxxxx'; // replace by your API key
    DSLScript.type = 'text/javascript';
    document.body.appendChild(DSLScript);
    document.body.removeChild(DSLScript);
  }