StreetViewPanorama class

January 28, 2020 ยท View on GitHub

This class extends BaseClass.

Contents

Overview

Google Street View provides panoramic 360 degree views from designated roads throughout its coverage area. Street View's API coverage is the same as that for the Google Maps application (https://maps.google.com/). The list of currently supported cities for Street View is available at the Google Maps website.

Create a Street View Panorama

You can create a panorama view using GoogleMaps.createPanorama(div).

<div class="pano" id="pano_canvas1"></div>

let panorama: StreetViewPanorama = GoogleMaps.createPanorama('pano_canvas');

panorama.setPosition({
  target: {lat: 42.345573, lng: -71.098326}
});

The PANORAMA_LOCATION_CHANGE event

Google takes panorama photos with special camera device on moving. Not only special car, but also they uses Trekker, Trolly, Bike, Snow mobile,... etc.

Since they takes panorama photos on moving periodically, there is no panorama photo between two locations that are taken photos.

For this reason, you can specify camera location, but the native API snaps to nearest available camera location. The PANORAMA_LOCATION_CHANGE event gives the information where the location is.

let panorama: StreetViewPanorama = GoogleMaps.createPanorama('pano_canvas');

panorama.setPosition({
  target: {lat: 42.345573, lng: -71.098326}
});

panorama.on(GoogleMapsEvent.PANORAMA_LOCATION_CHANGE).subscribe((params: any[]) => {
  let location: StreetViewLocation = params[0];

  let panoId:string = location.panoId;    // unique location id

  let position: ILatLng = location.latLng;  // lat,lng pair

  let links: StreetViewNavigationLink[] = location.links;      // links to the next available locations.
                                                               // The same as white arrow in panorama.

});

Panorama id

Panorama id (panoId) is unique identify for each panorama location.

This panoId is able to use for Street View Service and Google StreetView Image API.

As described in The PANORAMA_LOCATION_CHANGE event section, the Google Maps native API searches the nearest location in 50 meters from you requested. This is mostly fine, but this might display unexpected panorama if you want to display particular location. Because Google updates panorama photos every once in a while.

Using panoId avoids this trouble. Since the panoId is bounded to a particular panorama photo (location), you can always display exactly what you want.

panorama.setPosition({
  'target': 'FEpIJhSgQJOQCL3wOzoAAA'
})

Note that the above is dummy id.

However, this panoId is NOT permanent Id. If Google updates new panorama photos, new panorama id is generated, and older id is no longer available.

API Reference

Methods

Event

  • PANORAMA_READY

    This event is fired when the native panorama view is fully ready.

    Params Type Details
    params[0] StreetViewPanorama panorama instance

  • PANORAMA_LOCATION_CHANGE

    This event is fired when the panorama camera is moved to different location.

    Params Type Details
    params[0] StreetViewLocation new camera location
    params[1] StreetViewPanorama panorama instance

  • PANORAMA_CAMERA_CHANGE

    This event is fired when the panorama camera POV is changed.

    Params Type Details
    params[0] StreetViewCameraPosition new camera POV
    params[1] StreetViewPanorama panorama instance

  • PANORAMA_CLICK

    This event is fired when you click on panorama.

    Params Type Details
    params[0] [x: number, y: number] clicked position in pixels
    params[1] StreetViewPanorama panorama instance