I am currently attempting to integrate a Google Map into an Angular project. I am injecting the lat-lng information into the iframe URL, but unfortunately, the map is not being displayed and no errors are showing up in the console.
Below is the template source code:
<iframe [src]="sanitizeUrl('https://www.google.com/maps/embed/v1/place?q='+address?.latitude+','+address?.longitude+'&key=my_key')" width="393" height="165" frameborder="0"></iframe>
And here is the Angular component code:
import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@Component({
selector: 'app-leftblock',
templateUrl: './leftblock.component.html',
styleUrls: ['./leftblock.component.scss']
})
export class AppLeftblockComponent {
address: any;
constructor(
private sanitizer: DomSanitizer
this.address = {
'latitude': '19.0759837'
'latitude': '72.87765590000004'
};
) { }
sanitizeUrl(url) {
console.log(url);
this.sanitizer.bypassSecurityTrustUrl(url);
}
}