[Solved] Angular Error: Google Maps JavaScript API has been loaded directly without loading=async

Hi ramitaherwahd...,

You have to make use of callback function as it is required.

https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=function_name

If you dont have to use callback function, you can use Function.prototype.

https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=Function.prototype

Refer below link.

https://developers.google.com/maps/documentation/javascript/load-maps-js-api

here is what I have:

in ts file I have:

setTimeout(() => {
  this.dangerousUrl = "https://www.google.com/maps?q=" + this.property.theaddress + "&output=embed";
  }, 100);

  return this.dangerousUrl;

in html: (having pipe called safe)

           <div>
            <iframe *ngIf="deviveInfo.deviceType != 'mobile'"
              [src]= dangerousUrl|safe
              width="800" height="450" style="border:0;" loading="lazy" 
              referrerpolicy="no-referrer-when-downgrade">
            </iframe>
          </div>

the pipe:

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";

@Pipe({
  name: 'safe'
})
export class safeUrl implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(url: any) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

and in the index:

<script src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap"></script>

can you help me with that, why I am getting the warning?

for some reason when deployed it is not giving this error