2

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.

5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.