Street View

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 (http://maps.google.com/). The list of currently supported cities for Street View is available at the Google Maps Help Center.

The Google Maps Javascript API provides a Street View service for obtaining and manipulating the imagery used in Google Maps Street View. Unlike in the V2 API, the Street View service in the Maps Javascript API V3 is supported natively within the browser.

Street View Map Usage

Although Street View can be used within a standalone DOM element, it is most useful when indicating a location on a map. By default, Street View is enabled on a map, and a Street View Pegman control appears integrated within the navigation (zoom and pan) controls. You may hide this control within the map's MapOptions by setting streetViewControl to false. You may also change the default position of the Street View control by setting the Map's streetViewControlOptions.position property to a new ControlPosition.

The Street View Pegman control allows you to view Street View panoramas directly within the map. When clicking and holding the Pegman, the map updates to show Street View-enabled streets using blue outlines on the map.

Drop the Pegman marker onto a street and the map will update to display a Street View panorama of the indicated location.

The following sample adds a streetViewControl to a map of Boston near Fenway Park:

var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
    center: fenway,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

Street View Panoramas

Street View images are supported through use of the StreetViewPanorama object, which provides an API interface to a Street View "viewer." Each map contains a default Street View panorama, which you can retrieve by calling the map's getStreetView() method. When you add a Street View control to the map by setting its streetViewControl option to true, you automatically connect the Pegman control to this default Street View panorama.

You may also create your own StreetViewPanorama object and set the map to use that instead of the default, by setting the map's streetView property explicitly to that constructed object. You may wish to override the default panorama if you want to modify default behavior, such as the automatic sharing of overlays between the map and the panorama.

Street View Containers

You may instead wish to display a StreetViewPanorama within a separate DOM element, often a <div> element. Simply pass the DOM element within the StreetViewPanorama's constructor. For optimum display of images, we recommend a minimum size of 200 pixels by 200 pixels.

Note: although Street View functionality is designed to be used in conjunction with a map, this usage is not required. You may use a standalone Street View object without a map.

Street View Locations and Point-of-View (POV)

The StreetViewPanorama constructor also allows you to set the Street View location and point of view using the StreetViewOptions parameter. You may call setPosition() and setPov() on the object after construction to change its location and POV.

The Street View location defines the placement of the camera locus for an image, but it does not define the orientation of the camera for that image. For that purpose, the StreetViewPov object defines three properties:

  • heading (default 0) defines the rotation angle around the camera locus in degrees relative from true north. Headings are measured clockwise (90 degrees is true east).
  • pitch (default 0) defines the angle variance "up" or "down" from the camera's initial default pitch, which is often (but not always) flat horizontal. (For example, an image taken on a hill will likely exhibit a default pitch that is not horizontal.) Pitch angles are measured with positive values looking up (to +90 degrees straight up and orthogonal to the default pitch) and negative values looking down (to -90 degrees straight down and orthogonal to the default pitch).
  • zoom (default 1) defines the zoom level of this view (effectively proscribing the "field of view") with 0 being fully zoomed-out. Most Street View locations support zoom levels from 0 to 3, inclusive.

The following code displays a map of Boston with an initial view of Fenway Park. Selecting the Pegman and dragging it to a supported location on the map will change the Street View panorama:

var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
  center: fenway,
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
    document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
  position: fenway,
  pov: {
    heading: 34,
    pitch: 10,
    zoom: 1
  }
};
var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
map.setStreetView(panorama);

Overlays within Street View

Need documentation

Street View Events

When navigating between Street View or manipulating its orientation, you may wish to monitor several events that indicate changes to the StreetViewPanorama's state:

  • pano_changed fires whenever the individual pano ID changes. This event does not guarantee that any associated data within the panorama (such as the links) has also changed by the time this event is triggered; this event only indicates that a pano ID has changed. Note that the pano ID (which you can use to reference this panorama) is only stable within the current browser session.
  • position_changed fires whenever the underlying (LatLng) position of the panorama changes. Rotating a panorama will not trigger this event. Note that you could change a panorama's underlying position without changing the associated pano ID, since the API will automatically associate the nearest pano ID to the panorama's position.
  • pov_changed fires whenever the Street View's StreetViewPov changes. Note that this event may fire while the position, and pano ID, remain stable.
  • links_changed fires whenever the Street View's links change. Note that this event may fire asynchronously after a change in the pano ID indicated through pano_changed.
  • visible_changed fires whenever the Street View's visibility changes. Note that this event may fire asynchronously after a change in the pano ID indicated through pano_changed.

Directly Accessing Street View Data

You may wish to programmatically determine the availability of Street View data, or return information about particular panoramas, without requiring direct manipulation of a map/panorama. You may do so using the StreetViewService object, which provides an interface to the data stored in Google's Street View service.

Need documentation