[SOLVED] Google Streetview blocked by CORS

Google Streetview blocked by CORS

Im want to integrate StreetView from google maps into an webapplication but Im getting blocked by CORS. Im basically pulling the streetview as an background into my Three.js webbapplication. The URL works standalone but in my application I get cors errors. Any way of fixing this?

Here is my URL: http://maps.google.com/maps?q=&layer=c&cbll=40.7580336,-73.9855832&cbp=11,0,0,0,0

I have also tried with using cors-anywhere before as below: https://cors-anywhere.herokuapp.com/http://maps.google.com/maps?q=&layer=c&cbll=40.7580336,-73.9855832&cbp=11,0,0,0,0

but with no success.

My code:

<html>

<head>
    <script src="https://threejs.org/build/three.js"></script>
</head>

<body>
    <script src="js/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        // BG
        var container, loader, camera, scene, renderer, controls, bgTexture, bgWidth, bgHeight;
        loader = new THREE.TextureLoader();

        var url = "http://maps.google.com/maps?q=&layer=c&cbll=40.7580336,-73.9855832&cbp=11,0,0,0,0";

        bgTexture = loader.load(url,

            function (texture) {
                var img = texture.image;
                bgWidth = img.width;
                bgHeight = img.height;
                resize();
            }
        );
        scene.background = bgTexture;
        //

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry();
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        var animate = function () {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>

</html>

Solution

You can't embed the Google Maps application directly into your application. You'll have to use their Street View Service API or, if you only need a static image without any interaction, their Street View Static API .

The documentation explains in detail how you can achieve that.