Google Street View API CORS Issue when trying to access street view from localhost using Angular 2

Question

I am getting the following error when trying to access the panoramas . I come across this error randomly . Like sometimes it happens and other times it doesn't can someone please elaborate how can I resolve this .

Error : Access to Image at 'https://lh3.ggpht.com/-GEWinvnWrN8/VgoOwiNcv2I/AAAAAAAAA3w/vhFJX1VOvr4fDNV2JmKDPhUUx08MeBqdwCJkC/x0-y0-z0/p' from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:4200' is therefore not allowed access. The response had HTTP status code 403.

I got this CORS error while trying to access an API that I built using DRF too . But later I solved it using a middleware at my API. It doesn't sound logical to me that Google is not allowing me to access the images if it's not on same domain . I am working on Angular 2. this is the code that I call when user enters x=lat and y=lon .

    var map = new google.maps.Map(document.getElementById('map'), {
             zoom: 15,
             center: {lat: this.x, lng: this.y}
           });
    var panorama = new google.maps.StreetViewPanorama(
                 document.getElementById('pano'), {
                   position:  {lat: this.x, lng: this.y},
                   pov: {
                     heading: 34,
                     pitch: 10
                   }
                 });
    var cafeMarker = new google.maps.Marker({
                       position: {lat: this.x, lng: this.y},
                       map: map,
                       icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
                       title: 'Canteen'
                   });
                   panorama.addListener('position_changed', function() {
                 console.log(panorama.getPosition().lat() +" " + panorama.getPosition().lon());
            });

map.setStreetView(panorama);`

Adminicle

Answer 1

Check your reference to google API in index.html It should be:

src="https://maps.google.com/maps/api/js?key=YOUR-KEY">

(notice the httpS)

Intimate

It is httpS in index.html , weirdly I am getting this error only once in a while only on localhost. And not if the website is running on some server, Error is not seen even if I route the localhost to ngrok. – Adminicle