[GIS] Integrate Google Street View into Openlayers3

Question

I am wondering if it is possible to integrate Google Street View into my Openlayers3 application. I do not want to show Google Maps, only Street View, since the base maps I am working with are more detailed.

Answer 1

I've managed to integrate StreetView into my app without too much trouble. It's based on geolocation and the code for the event listener is below:

    // update streetview when the position changes.
session.Geolocation.once('change', function () {
    // Add animation to the render pipeline
    var p = session.Geolocation.getPosition();
    var coord3857 = ol.proj.transform(p, 'EPSG:3857', 'EPSG:4326');
    console.log(coord3857);
    var lon = coord3857[0];
    var lat = coord3857[1];
    svLon = lon; 
    svLat = lat;
    initialize();
});

svLon/svLat are global variables which can be utilised by the Google StreetView initialize function which is called at the end of the change event.

initialize is a standard Google StreetView method and goes like this:

function initialize() {
// Google StreetView
var panorama;

if (svLat === undefined) {
    svLat = 53.3154562;
    svLon = -2.3306616;
}

panorama = new google.maps.StreetViewPanorama(
    document.getElementById('street-view'),
    {
        position: {
            lat: svLat,
            lng: svLon
        },
        pov: { heading: 165, pitch: 0 },
        zoom: 1,
        visible: true
    });
}

You'll also need a call to the Google Maps API in your html page somewhere like this:

<script async defer
    src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initialize">

That's pretty much all there is too it, hopefully that should pull up the streetview with the coords you've fed in. Google ref here