He estado luchando con este problema durante algunas semanas. Independientemente de los cambios que realice en mi CSP, sigo recibiendo el mismo error. No estoy seguro de si tiene algo que ver con mis encabezados CSP o no. Configuración: tengo un angular 13 SPA con un back-end NodeJS.

1. Usé NPM para instalar

 "@angular/google-maps": "^13.3.2", "@googlemaps/js-api-loader": "^1.14.3",

2. Importo los métodos en mi archivo dashboard.ts:

 import { Loader } from "@googlemaps/js-api-loader";

3. Solía seguir el código cortado en mi ngOnInit():

    let loader = new Loader({ apiKey: '--------------------------', }); loader.load().then(() => { console.log('loaded gmaps') const location = { lat: 51.233334, lng: 6.783333 } this.map = new google.maps.Map(document.getElementById("map"), { center: location, zoom: 6 }) const marker = new google.maps.Marker({ position: location, map: this.map, }); })

4. Modifiqué mi encabezado de seguridad de contenido para que sea:

 <meta http-equiv="Content-Security-Policy" content="script-src 'self' maps.googleapis.com; img-src 'self' data: maps.gstatic.com *.googleapis.com *.ggpht.com; font-src https://fonts.gstatic.com/ 'unsafe-inline'; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; style-src-elem 'self' https://fonts.googleapis.com 'unsafe-inline'; />

5. No importa lo que haga, siempre obtengo el mismo error:

74.6f64f0c92cc7c0a0.js:346 Se negó a cargar el script 'https://maps.googleapis.com/maps/api/js?callback=__googleMapsCallback&key=---------------' porque infringe la siguiente directiva de Política de seguridad de contenido: "script-src 'self'". Tenga en cuenta que 'script-src-elem' no se configuró explícitamente, por lo que 'script-src' se usa como alternativa.

¡Cualquier idea sería muy apreciada!