I've been struggling with this issue for few weeks now. No matter what changes I make to my CSP - I still get the same error. I'm not sure if it has anything to do with my CSP headers or not. Set up: I have an angular 13 SPA with a NodeJS back end.

1. I used NPM to install

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

2. I import the methods in my dashboard.ts file:

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

3. I used to following code snip it in my 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. I modified my Content Security Header to be:

<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 matter what I do - I always get the same error:

74.6f64f0c92cc7c0a0.js:346 Refused to load the script 'https://maps.googleapis.com/maps/api/js?callback=__googleMapsCallback&key=---------------' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Any insight would be greatly appreciated!