integrazione api mappa google

src/app/app.module.ts

@@ -7,13 +7,15 @@ import { HomeComponent } from './home/home.component';
 import { ListComponent } from './list/list.component';
 import { DetailComponent } from './detail/detail.component';
 import {FormsModule} from "@angular/forms";
+import { SafePipe } from './pipes/safe.pipe';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
     ListComponent,
-    DetailComponent
+    DetailComponent,
+    SafePipe
   ],
   imports: [
     BrowserModule,

src/app/detail/detail.component.html

@@ -3,6 +3,15 @@
   <p>{{test.description}}</p>
   <p ng-model="showNav" *ngIf="showNav">Distanza: {{distance}}</p>
   <div id="nav" ng-model="showNav" *ngIf="showNav">
-    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1708.0829920038827!2d8.790506152417485!3d46.16602530670125!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4785c833c36e0bd5%3A0x427d483133d7c1a0!2sCPT%20Locarno%20(SPAI%20%E2%80%93%20MPT)%20-%20Centro%20professionale%20tecnico%20Locarno!5e0!3m2!1sit!2sch!4v1675246087183!5m2!1sit!2sch" width="650" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    <!--<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1708.0829920038827!2d8.790506152417485!3d46.16602530670125!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4785c833c36e0bd5%3A0x427d483133d7c1a0!2sCPT%20Locarno%20(SPAI%20%E2%80%93%20MPT)%20-%20Centro%20professionale%20tecnico%20Locarno!5e0!3m2!1sit!2sch!4v1675246087183!5m2!1sit!2sch" width="650" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d912.8193347586248!2d8.796584272413714!3d46.158022715772375!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sit!2sch!4v1678192674449!5m2!1sit!2sch" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>-->
+    <iframe
+      width="450"
+      height="250"
+      frameborder="0" style="border:0"
+      referrerpolicy="no-referrer-when-downgrade"
+      [src]='embed | safe'
+      allowfullscreen>
+    </iframe>
   </div>
 </div>

src/app/detail/detail.component.ts

@@ -13,10 +13,14 @@ export class DetailComponent implements OnInit {
 
   test = {
     name: 'SPAI',
-    cordinates: "46.15187077044123, 8.799829438699243",
+    cordinates: '46.15187077044123,8.799829438699243',
+    lat: 46.15187077044123,
+    lng: 8.799829438699243,
     description: "Lorem ipsum"
   }
 
+  embed = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&q=${this.test.lat},${this.test.lng}`
+
   cord = {
     lat: 0,
     lng: 0
@@ -27,6 +31,7 @@ export class DetailComponent implements OnInit {
   displayedDistance = 0;
 
   getLocation() {
+    console.log(this.embed)
     console.log("get location");
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition((position) => {

src/app/pipes/safe.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SafePipe } from './safe.pipe';
+
+describe('SafePipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/safe.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {DomSanitizer} from "@angular/platform-browser";
+
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+  constructor(private domSanitizer: DomSanitizer) {}
+  transform(url:string) {
+    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+}