2 Motivation Description (What)
In the context of information technology boom, the smartphone variety, replacing paper maps by electronic map. An application of Google, 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.
The Google Maps JavaScript API provides a Street View service for obtaining and manipulating the imagery used in Google Maps Street View. This Street View service is supported natively within the browser.
3 Technical Description (How)
3.1 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 the user clicks and holds the Pegman, the map updates to show blue outlines around Street View-enabled streets, offering a user experience similar to the Google Maps app.
When the user drops the Pegman marker onto a street, the map updates to display a Street View panorama of the indicated location.
3.2 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 itsstreetViewControl 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.
3.3 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.
3.4 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 theStreetViewOptions 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 focus for an image, but it does not define the orientation of the camera for that image. For that purpose, the StreetViewPov object defines two 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).
The StreetViewPov object is most often used to determine the point of view of the Street View camera. You can also determine the point-of-view of the photographer — typically the direction the car or trike was facing — with the StreetViewPanorama.getPhotographerPov() method.
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:
function initialize() {
var fenway = {lat: 42.345573, lng: -71.098326};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
<div id="map"></div>
<div id="pano"></div>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map, #pano {
float: left;
height: 100%;
width: 45%;
} src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&cal lback=initialize">
</script>
function initialize() {
var fenway = {lat: 42.345573, lng: -71.098326};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
View example (streetview-simple.html).
3.5 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.
View example (streetview-events.html).
3.6 Street View Controls
When displaying a StreetViewPanorama, a variety of controls appear on the panorama by default. You can enable or disable these controls by setting their appropriate fields within the Street View'sStreetViewPanoramaOptions to true or false:
• A panControl provides a way to rotate the panorama. This control appears by default as a standard integrated compass and pan control. You may alter the control's position by providing PanControlOptionswithin the panControlOptions field.
• A zoomControl provides a way to zoom within the image. This control appears by default near the bottom right of the panorama. You can alter the control's appearance by providing ZoomControlOptions within thezoomControlOptions field.
• An addressControl provides a textual overlay indicating the address of the associated location, and offers a link to open the location in Google Maps. You can alter the control's appearance by providingStreetViewAddressControlOptions within the addressControlOptions field.
• A fullscreenControl offers the option to open Street View in fullscreen mode. You can alter the control's appearance by providing FullscreenControlOptions within the fullscreenControlOptions field.
• A linksControl provides guide arrows on the image for traveling to adjacent panorama images.
• A Close control allows the user to close the Street View viewer. You can enable or disable the Close control by setting enableCloseButton to true or false.
View example (streetview-controls.html).
You can access to this link and download demos code, demos video as well as.
https://drive.google.com/file/d/0B_ZlRF5V276FUlpqcjB0SmVkd0E/view?pref=2&pli=1