When Will Street View Come Thru Again

March 17, 2022 Post a Comment

Overview
Products
Pricing
Documentation
- Guides
- Reference
- Samples
- Support
Weblog
Community

Street View Service

Overview

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

A sample Street View image is shown below.

The 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 inside the browser.

Street View Map Usage

Although Street View can exist used inside a standalone DOM element, information technology is about useful when indicating a location on a map. By default, Street View is enabled on a map, and a Street View Pegman command appears integrated within the navigation (zoom and pan) controls. Y'all may hibernate this command inside 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 belongings to a new ControlPosition.

The Street View Pegman control allows you to view Street View panoramas directly inside the map. When the user clicks and holds the Pegman, the map updates to show blue outlines effectually Street View-enabled streets, offering a user experience like to the Google Maps app.

When the user drops the Pegman marking onto a street, the map updates to display a Street View panorama of the indicated location.

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 lot automatically connect the Pegman command to this default Street View panorama.

You may also create your ain StreetViewPanorama object and gear up the map to use that instead of the default, by setting the map's streetView belongings explicitly to that synthetic object. Yous may wish to override the default panorama if you lot want to alter default behavior, such as the automatic sharing of overlays between the map and the panorama. (See Overlays within Street View below.)

Street View Containers

Yous may instead wish to display a StreetViewPanorama inside a split up DOM element, often a <div> chemical element. Merely pass the DOM element within the StreetViewPanorama'southward constructor. For optimum brandish of images, nosotros recommend a minimum size of 200 pixels by 200 pixels.

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

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

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

The Street View location defines the placement of the camera focus for an paradigm, but it does not define the orientation of the photographic 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 truthful north. Headings are measured clockwise (90 degrees is true east).
pitch (default 0) defines the bending variance "upward" or "down" from the camera'south initial default pitch, which is often (merely not always) apartment horizontal. (For case, an image taken on a hill will likely exhibit a default pitch that is not horizontal.) Pitch angles are measured with positive values looking upwards (to +ninety degrees directly upwards 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 frequently used to determine the point of view of the Street View camera. Yous tin too 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 alter the Street View panorama:

TypeScript

function initialize() {   const fenway = { lat: 42.345573, lng: -71.098326 };   const map = new google.maps.Map(     document.getElementById("map") equally HTMLElement,     {       center: fenway,       zoom: fourteen,     }   );   const panorama = new google.maps.StreetViewPanorama(     document.getElementById("pano") as HTMLElement,     {       position: fenway,       pov: {         heading: 34,         pitch: 10,       },     }   );    map.setStreetView(panorama); }

JavaScript

function initialize() {   const fenway = { lat: 42.345573, lng: -71.098326 };   const map = new google.maps.Map(document.getElementById("map"), {     heart: fenway,     zoom: 14,   });   const panorama = new google.maps.StreetViewPanorama(     document.getElementById("pano"),     {       position: fenway,       pov: {         heading: 34,         pitch: ten,       },     }   );    map.setStreetView(panorama); }

CSS

html, body {   elevation: 100%;   margin: 0;   padding: 0; }  #map, #pano {   float: left;   summit: 100%;   width: 50%; }

HTML

<!DOCTYPE html> <html>   <head>     <title>Street View split-map-panes</title>     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>     <link rel="stylesheet" type="text/css" href="./fashion.css" />     <script src="./index.js"></script>   </caput>   <torso>     <div id="map"></div>     <div id="pano"></div>      <!-- Async script executes immediately and must be later any DOM elements used in callback. -->     <script       src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize&v=weekly"       async     ></script>   </body> </html>

View case

html, trunk { superlative: 100%; margin: 0; padding: 0; } #map, #pano { float: left; height: 100%; width: 50%; }

<!DOCTYPE html> <html> <head> <title>Street View carve up-map-panes</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>  </head> <body> <div id="map"></div> <div id="pano"></div>  <script src="https://maps.googleapis.com/maps/api/js?cardinal=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&5=weekly&channel=2" async ></script> </trunk> </html>

Endeavour Sample

Movement tracking on mobile devices

On devices that support device orientation events, the API offers users the ability to alter the Street View point of view based on the motility of the device. Users tin look around by moving their devices. This is chosen move tracking or device rotation tracking.

As app developer, you can change the default beliefs as follows:

Enable or disable the move tracking functionality. By default, motion tracking is enabled on any device that supports it. The following sample disables motion tracking, only leaves the motility tracking control visible. (Note that the user tin can plough on motion tracking past tapping the control.)
```
var panorama = new google.maps.StreetViewPanorama(     document.getElementById('pano'), {       position: {lat: 37.869260, lng: -122.254811},       pov: {heading: 165, pitch: 0},       motionTracking: false     });                      
```
Hide or show the motion tracking control. By default, the control is shown on devices that support movement tracking. The user can tap the control to plow motion tracking on or off. Note that the control will never appear if the device doesn't support motion tracking, regardless of the value of motionTrackingControl.

The following sample disables both motility tracking and the motion tracking control. In this case, the user tin can't plow motion tracking on:
```
var panorama = new google.maps.StreetViewPanorama(     document.getElementById('pano'), {       position: {lat: 37.869260, lng: -122.254811},       pov: {heading: 165, pitch: 0},       motionTracking: false,       motionTrackingControl: faux     });                      
```

Change the default position of the movement tracking command. By default, the control appears well-nigh the bottom right of the panorama (position RIGHT_BOTTOM). The post-obit sample sets the position of the control to left bottom:

var panorama = new google.maps.StreetViewPanorama(     document.getElementById('pano'), {       position: {lat: 37.869260, lng: -122.254811},       pov: {heading: 165, pitch: 0},       motionTrackingControlOptions: {         position: google.maps.ControlPosition.LEFT_BOTTOM       }     });

To see motion tracking in activeness, view the following sample on a mobile device (or any device that supports device orientation events):

View case

Overlays within Street View

The default StreetViewPanorama object supports the native brandish of map overlays. Overlays generally appear at "street level" anchored at LatLng positions. (Markers volition appear with their tails anchored to the location'south horizontal plane inside the Street View panorama for example.)

Currently, the types of overlays which are supported on Street View panoramas are express to Markingsouth, InfoWindowdue south and custom OverlayViews. Overlays which yous display on a map may be displayed on a Street View panorama by treating the panorama as a substitute for the Map object, calling setMap() and passing the StreetViewPanorama equally an statement instead of a map. Info windows similarly may be opened inside a Street View panorama by calling open(), passing the StreetViewPanorama() instead of a map.

Additionally, when creating a map with a default StreetViewPanorama, whatever markers created on a map are shared automatically with the map'south associated Street View panorama, provided that panorama is visible. To retrieve the default Street View panorama, telephone call getStreetView() on the Map object. Note that if you explicitly set up the map's streetView holding to a StreetViewPanorama of your own construction, y'all will override the default panorama.

The following example shows markers denoting various locations around Astor Place, New York City. Toggle the brandish to Street View to show the shared markers displaying within the StreetViewPanorama.

TypeScript

permit panorama: google.maps.StreetViewPanorama;  office initMap(): void {   const astorPlace = { lat: 40.729884, lng: -73.990988 };    // Ready the map   const map = new google.maps.Map(     document.getElementById("map") equally HTMLElement,     {       center: astorPlace,       zoom: 18,       streetViewControl: simulated,     }   );    document     .getElementById("toggle")!     .addEventListener("click", toggleStreetView);    // Set upwardly the markers on the map   const cafeMarker = new google.maps.Marker({     position: { lat: 40.730031, lng: -73.991428 },     map,     icon: "https://nautical chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",     title: "Buffet",   });    const bankMarker = new google.maps.Marker({     position: { lat: twoscore.729681, lng: -73.991138 },     map,     icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",     championship: "Banking company",   });    const busMarker = new google.maps.Marker({     position: { lat: forty.729559, lng: -73.990741 },     map,     icon: "https://nautical chart.apis.google.com/chart?chst=d_map_pin_icon&chld=coach|FFFF00",     title: "Bus Terminate",   });    // We get the map's default panorama and set up some defaults.   // Note that we don't yet gear up information technology visible.   panorama = map.getStreetView()!; // TODO ready type   panorama.setPosition(astorPlace);   panorama.setPov(     /** @type {google.maps.StreetViewPov} */ {       heading: 265,       pitch: 0,     }   ); }  function toggleStreetView(): void {   const toggle = panorama.getVisible();    if (toggle == faux) {     panorama.setVisible(true);   } else {     panorama.setVisible(fake);   } }

JavaScript

permit panorama;  function initMap() {   const astorPlace = { lat: 40.729884, lng: -73.990988 };   // Fix the map   const map = new google.maps.Map(document.getElementById("map"), {     center: astorPlace,     zoom: xviii,     streetViewControl: false,   });    certificate.getElementById("toggle").addEventListener("click", toggleStreetView);    // Fix the markers on the map   const cafeMarker = new google.maps.Mark({     position: { lat: 40.730031, lng: -73.991428 },     map,     icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",     title: "Cafe",   });   const bankMarker = new google.maps.Marker({     position: { lat: twoscore.729681, lng: -73.991138 },     map,     icon: "https://nautical chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",     title: "Bank",   });   const busMarker = new google.maps.Marking({     position: { lat: forty.729559, lng: -73.990741 },     map,     icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=motorcoach|FFFF00",     championship: "Bus Stop",   });    // We go the map's default panorama and fix up some defaults.   // Annotation that we don't yet set information technology visible.   panorama = map.getStreetView(); // TODO fix type   panorama.setPosition(astorPlace);   panorama.setPov(     /** @blazon {google.maps.StreetViewPov} */ {       heading: 265,       pitch: 0,     }   ); }  function toggleStreetView() {   const toggle = panorama.getVisible();    if (toggle == false) {     panorama.setVisible(true);   } else {     panorama.setVisible(simulated);   } }

CSS

/* Always set the map summit explicitly to ascertain the size of the div        * element that contains the map. */ #map {   height: 100%; }  /* Optional: Makes the sample page fill the window. */ html, body {   height: 100%;   margin: 0;   padding: 0; }  #floating-panel {   position: absolute;   elevation: 10px;   left: 25%;   z-alphabetize: 5;   background-color: #fff;   padding: 5px;   border: 1px solid #999;   text-align: heart;   font-family unit: "Roboto", "sans-serif";   line-height: 30px;   padding-left: 10px; }  #floating-panel {   margin-left: -100px; }

HTML

<!DOCTYPE html> <html>   <caput>     <championship>Overlays Within Street View</title>     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>     <link rel="stylesheet" type="text/css" href="./mode.css" />     <script src="./alphabetize.js"></script>   </head>   <trunk>     <div id="floating-panel">       <input type="button" value="Toggle Street View" id="toggle" />     </div>     <div id="map"></div>      <!-- Async script executes immediately and must be after any DOM elements used in callback. -->     <script       src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&5=weekly"       async     ></script>   </body> </html>

View example

allow panorama; part initMap() { const astorPlace = { lat: twoscore.729884, lng: -73.990988 }; // Set upwardly the map const map = new google.maps.Map(document.getElementById("map"), { centre: astorPlace, zoom: 18, streetViewControl: false, }); document.getElementById("toggle").addEventListener("click", toggleStreetView); // Set up the markers on the map const cafeMarker = new google.maps.Marker({ position: { lat: 40.730031, lng: -73.991428 }, map, icon: "https://nautical chart.apis.google.com/nautical chart?chst=d_map_pin_icon&chld=cafe|FFFF00", title: "Cafe", }); const bankMarker = new google.maps.Marker({ position: { lat: 40.729681, lng: -73.991138 }, map, icon: "https://nautical chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00", championship: "Bank", }); const busMarker = new google.maps.Marker({ position: { lat: forty.729559, lng: -73.990741 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00", title: "Double-decker Terminate", }); // Nosotros become the map's default panorama and prepare some defaults. // Notation that we don't still set it visible. panorama = map.getStreetView(); // TODO fix blazon panorama.setPosition(astorPlace); panorama.setPov( /** @type {google.maps.StreetViewPov} */ { heading: 265, pitch: 0, } ); } function toggleStreetView() { const toggle = panorama.getVisible(); if (toggle == fake) { panorama.setVisible(true); } else { panorama.setVisible(false); } }

/* Always set the map pinnacle explicitly to define the size of the div * element that contains the map. */ #map { pinnacle: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { top: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; summit: 10px; left: 25%; z-index: 5; background-colour: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-superlative: 30px; padding-left: 10px; } #floating-panel { margin-left: -100px; }

<!DOCTYPE html> <html> <head> <title>Overlays Within Street View</championship> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>  </head> <body> <div id="floating-panel"> <input type="button" value="Toggle Street View" id="toggle" /> </div> <div id="map"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </trunk> </html>

Try Sample

Street View Events

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

pano_changed fires whenever the private pano ID changes. This event does not guarantee that any associated data within the panorama (such as the links) has likewise changed by the time this issue is triggered; this issue just indicates that a pano ID has inverse. Note that the pano ID (which you lot can utilize to reference this panorama) is only stable inside the current browser session.
position_changed fires whenever the underlying (LatLng) position of the panorama changes. Rotating a panorama will non trigger this result. Note that you could change a panorama's underlying position without changing the associated pano ID, since the API volition automatically associate the nearest pano ID to the panorama'south position.
pov_changed fires whenever the Street View'due south StreetViewPov changes. Annotation that this upshot may fire while the position, and pano ID, remain stable.
links_changed fires whenever the Street View'south links change. Annotation that this issue may fire asynchronously after a change in the pano ID indicated through pano_changed.
visible_changed fires whenever the Street View's visibility changes. Notation that this event may fire asynchronously after a modify in the pano ID indicated through pano_changed.

The post-obit code illustrates how these events can be handled to collect data about the underlying StreetViewPanorama:

TypeScript

function initPano() {   const panorama = new google.maps.StreetViewPanorama(     document.getElementById("pano") every bit HTMLElement,     {       position: { lat: 37.869, lng: -122.255 },       pov: {         heading: 270,         pitch: 0,       },       visible: truthful,     }   );    panorama.addListener("pano_changed", () => {     const panoCell = certificate.getElementById("pano-jail cell") as HTMLElement;      panoCell.innerHTML = panorama.getPano();   });    panorama.addListener("links_changed", () => {     const linksTable = document.getElementById("links_table") equally HTMLElement;      while (linksTable.hasChildNodes()) {       linksTable.removeChild(linksTable.lastChild as ChildNode);     }      const links = panorama.getLinks();      for (const i in links) {       const row = document.createElement("tr");        linksTable.appendChild(row);        const labelCell = certificate.createElement("td");        labelCell.innerHTML = "<b>Link: " + i + "</b>";        const valueCell = document.createElement("td");        valueCell.innerHTML = links[i].clarification equally string;       linksTable.appendChild(labelCell);       linksTable.appendChild(valueCell);     }   });    panorama.addListener("position_changed", () => {     const positionCell = document.getElementById(       "position-cell"     ) as HTMLElement;      (positionCell.firstChild as HTMLElement).nodeValue =       panorama.getPosition() + "";   });    panorama.addListener("pov_changed", () => {     const headingCell = document.getElementById("heading-cell") equally HTMLElement;     const pitchCell = document.getElementById("pitch-jail cell") as HTMLElement;      (headingCell.firstChild every bit HTMLElement).nodeValue =       panorama.getPov().heading + "";     (pitchCell.firstChild equally HTMLElement).nodeValue =       panorama.getPov().pitch + "";   }); }

JavaScript

function initPano() {   const panorama = new google.maps.StreetViewPanorama(     certificate.getElementById("pano"),     {       position: { lat: 37.869, lng: -122.255 },       pov: {         heading: 270,         pitch: 0,       },       visible: true,     }   );    panorama.addListener("pano_changed", () => {     const panoCell = document.getElementById("pano-cell");      panoCell.innerHTML = panorama.getPano();   });   panorama.addListener("links_changed", () => {     const linksTable = document.getElementById("links_table");      while (linksTable.hasChildNodes()) {       linksTable.removeChild(linksTable.lastChild);     }      const links = panorama.getLinks();      for (const i in links) {       const row = document.createElement("tr");        linksTable.appendChild(row);        const labelCell = document.createElement("td");        labelCell.innerHTML = "<b>Link: " + i + "</b>";        const valueCell = certificate.createElement("td");        valueCell.innerHTML = links[i].description;       linksTable.appendChild(labelCell);       linksTable.appendChild(valueCell);     }   });   panorama.addListener("position_changed", () => {     const positionCell = certificate.getElementById("position-jail cell");      positionCell.firstChild.nodeValue = panorama.getPosition() + "";   });   panorama.addListener("pov_changed", () => {     const headingCell = document.getElementById("heading-prison cell");     const pitchCell = document.getElementById("pitch-cell");      headingCell.firstChild.nodeValue = panorama.getPov().heading + "";     pitchCell.firstChild.nodeValue = panorama.getPov().pitch + "";   }); }

CSS

/* Always set the map height explicitly to define the size of the div        * chemical element that contains the map. */ #map {   height: 100%; }  /* Optional: Makes the sample page fill the window. */ html, body {   acme: 100%;   margin: 0;   padding: 0; }  #floating-panel {   position: absolute;   acme: 10px;   left: 25%;   z-alphabetize: 5;   background-color: #fff;   padding: 5px;   border: 1px solid #999;   text-align: middle;   font-family unit: "Roboto", "sans-serif";   line-tiptop: 30px;   padding-left: 10px; }  #pano {   width: 50%;   height: 100%;   bladder: left; }  #floating-panel {   width: 45%;   height: 100%;   bladder: right;   text-align: left;   overflow: motorcar;   position: static;   border: 0px solid #999; }

HTML

<!DOCTYPE html> <html>   <head>     <title>Street View Events</championship>     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>     <link rel="stylesheet" type="text/css" href="./style.css" />     <script src="./alphabetize.js"></script>   </head>   <body>     <div id="pano"></div>     <div id="floating-panel">       <table>         <tr>           <td><b>Position</b></td>           <td id="position-cell">&nbsp;</td>         </tr>         <tr>           <td><b>POV Heading</b></td>           <td id="heading-jail cell">270</td>         </tr>         <tr>           <td><b>POV Pitch</b></td>           <td id="pitch-cell">0.0</td>         </tr>         <tr>           <td><b>Pano ID</b></td>           <td id="pano-prison cell">&nbsp;</td>         </tr>         <table id="links_table"></table>       </table>     </div>      <!-- Async script executes immediately and must be subsequently any DOM elements used in callback. -->     <script       src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initPano&5=weekly"       async     ></script>   </body> </html>

View instance

/* Always set up the map height explicitly to define the size of the div * element that contains the map. */ #map { superlative: 100%; } /* Optional: Makes the sample folio fill the window. */ html, torso { peak: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; elevation: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family unit: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; } #pano { width: l%; summit: 100%; float: left; } #floating-console { width: 45%; height: 100%; float: right; text-marshal: left; overflow: motorcar; position: static; edge: 0px solid #999; }

<!DOCTYPE html> <html> <head> <title>Street View Events</championship> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>  </head> <body> <div id="pano"></div> <div id="floating-panel"> <tabular array> <tr> <td><b>Position</b></td> <td id="position-prison cell"> </td> </tr> <tr> <td><b>POV Heading</b></td> <td id="heading-cell">270</td> </tr> <tr> <td><b>POV Pitch</b></td> <td id="pitch-cell">0.0</td> </tr> <tr> <td><b>Pano ID</b></td> <td id="pano-cell"> </td> </tr> <tabular array id="links_table"></table> </table> </div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&five=weekly&channel=2" async ></script> </body> </html>

Try Sample

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 StreetViewPanoramaOptions to true or imitation:

A panControl provides a way to rotate the panorama. This control appears past default equally a standard integrated compass and pan control. Yous may alter the control's position by providing PanControlOptions within the panControlOptions field.
A zoomControl provides a way to zoom within the paradigm. This control appears by default near the bottom right of the panorama. You tin can change the control's appearance by providing ZoomControlOptions inside the zoomControlOptions field.
An addressControl provides a textual overlay indicating the accost of the associated location, and offers a link to open the location in Google Maps. You can alter the control's appearance by providing StreetViewAddressControlOptions within the addressControlOptions field.
A fullscreenControl offers the option to open up Street View in fullscreen mode. You lot can alter the control'due south appearance past providing FullscreenControlOptions inside the fullscreenControlOptions field.
A motionTrackingControl offers the choice to enable or disable motion tracking on mobile devices. This command appears just on devices that support device orientation events. By default, the control appears near the bottom right of the panorama. You tin alter the control'southward position by providing MotionTrackingControlOptions. For more than information, see the department on motion tracking.
A linksControl provides guide arrows on the epitome for traveling to adjacent panorama images.
A Close control allows the user to close the Street View viewer. You can enable or disable the Shut command by setting enableCloseButton to true or simulated.

The following example alters the controls displayed inside the associated Street View and removes the view's links:

TypeScript

function initPano() {   // Notation: synthetic panorama objects have visible: true   // gear up by default.   const panorama = new google.maps.StreetViewPanorama(     certificate.getElementById("map") as HTMLElement,     {       position: { lat: 42.345573, lng: -71.098326 },       addressControlOptions: {         position: google.maps.ControlPosition.BOTTOM_CENTER,       },       linksControl: faux,       panControl: false,       enableCloseButton: false,     }   ); }

JavaScript

office initPano() {   // Annotation: constructed panorama objects take visible: true   // gear up past default.   const panorama = new google.maps.StreetViewPanorama(     document.getElementById("map"),     {       position: { lat: 42.345573, lng: -71.098326 },       addressControlOptions: {         position: google.maps.ControlPosition.BOTTOM_CENTER,       },       linksControl: false,       panControl: imitation,       enableCloseButton: faux,     }   ); }

CSS

/* Ever set the map height explicitly to ascertain the size of the div        * chemical element that contains the map. */ #map {   height: 100%; }  /* Optional: Makes the sample folio fill the window. */ html, body {   height: 100%;   margin: 0;   padding: 0; }

HTML

<!DOCTYPE html> <html>   <caput>     <title>Street View Controls</title>     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>     <link rel="stylesheet" blazon="text/css" href="./style.css" />     <script src="./alphabetize.js"></script>   </head>   <body>     <div id="map"></div>      <!-- Async script executes immediately and must be later on any DOM elements used in callback. -->     <script       src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initPano&v=weekly"       async     ></script>   </body> </html>

View instance

role initPano() { // Note: constructed panorama objects have visible: true // set up by default. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map"), { position: { lat: 42.345573, lng: -71.098326 }, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER, }, linksControl: false, panControl: false, enableCloseButton: false, } ); }

/* Always prepare the map acme explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <caput> <title>Street View Controls</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>  </caput> <body> <div id="map"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&five=weekly&aqueduct=ii" async ></script> </body> </html>

Try Sample

Directly Accessing Street View Data

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

Street View Service Requests

Accessing the Street View service is asynchronous, since the Google Maps API needs to make a call to an external server. For that reason, you demand to pass a callback method to execute upon completion of the request. This callback method processes the consequence.

You can initiate requests to the StreetViewService using StreetViewPanoRequest or StreetViewLocationRequest.

A request using StreetViewPanoRequest returns panorama data given a reference ID which uniquely identifies the panorama. Note that these reference IDs are only stable for the lifetime of the imagery of that panorama.

A request using StreetViewLocationRequest searches for panorama data at a specified location, using the post-obit parameters:

location specifies the location (latitude and longitude) to search for a panorama.
preference sets a preference for which panorama should be found within the radius: the 1 nearest to the provided location, or the all-time one inside the radius.
radius sets a radius, specified in meters, in which to search for a panorama, centered on the given latitude and longitude. Defaults to 50 when not supplied.
source specifies the source of panoramas to search. Valid values are:
- default uses the default sources for Street View; searches are not express to specific sources.
- outdoor limits searches to outdoor collections. Note that outdoor panoramas may not exist for the specified location.

Street View Service Responses

The function getPanorama() needs a callback function to execute upon retrieval of a effect from the Street View service. This callback function returns a set of panorama information within a StreetViewPanoramaData object and a StreetViewStatus lawmaking cogent the status of the request, in that order.

A StreetViewPanoramaData object specification contains meta-data near a Street View panorama of the following grade:

{   "location": {     "latLng": LatLng,     "description": string,     "pano": string   },   "copyright": string,   "links": [{       "heading": number,       "clarification": cord,       "pano": cord,       "roadColor": cord,       "roadOpacity": number     }],   "tiles": {     "worldSize": Size,     "tileSize": Size,     "centerHeading": number   } }

Note that this data object is not a StreetViewPanorama object itself. To create a Street View object using this data, you would need to create a StreetViewPanorama and call setPano(), passing it the ID equally noted in the returned location.pano field.

The status code may render 1 of the following values:

OK indicates that the service found a matching panorama.
ZERO_RESULTS indicates that the service could not detect a matching panorama with the passed criteria.
UNKNOWN_ERROR indicates that a Street View request could not be processed, though the exact reason is unknown.

The following code creates a StreetViewService that responds to user clicks on a map by creating markers which, when clicked, display a StreetViewPanorama of that location. The code uses the contents of StreetViewPanoramaData returned from the service.

TypeScript

/*  * Click the map to set a new location for the Street View camera.  */  let map: google.maps.Map;  allow panorama: google.maps.StreetViewPanorama;  function initMap(): void {   const berkeley = { lat: 37.869085, lng: -122.254775 };   const sv = new google.maps.StreetViewService();    panorama = new google.maps.StreetViewPanorama(     certificate.getElementById("pano") as HTMLElement   );    // Set upwards the map.   map = new google.maps.Map(certificate.getElementById("map") every bit HTMLElement, {     heart: berkeley,     zoom: 16,     streetViewControl: simulated,   });    // Prepare the initial Street View photographic camera to the center of the map   sv.getPanorama({ location: berkeley, radius: l }).then(processSVData);    // Expect for a nearby Street View panorama when the map is clicked.   // getPanorama will return the nearest pano when the given   // radius is l meters or less.   map.addListener("click", (event) => {     sv.getPanorama({ location: consequence.latLng, radius: 50 })       .then(processSVData)       .catch((e) =>         console.error("Street View data not found for this location.")       );   }); }  part processSVData({ information }: google.maps.StreetViewResponse) {   const location = information.location!;    const marker = new google.maps.Marker({     position: location.latLng,     map,     title: location.description,   });    panorama.setPano(location.pano as string);   panorama.setPov({     heading: 270,     pitch: 0,   });   panorama.setVisible(true);    mark.addListener("click", () => {     const markerPanoID = location.pano;      // Fix the Pano to use the passed panoID.     panorama.setPano(markerPanoID as string);     panorama.setPov({       heading: 270,       pitch: 0,     });     panorama.setVisible(true);   }); }

JavaScript

/*  * Click the map to set up a new location for the Street View camera.  */ permit map; let panorama;  office initMap() {   const berkeley = { lat: 37.869085, lng: -122.254775 };   const sv = new google.maps.StreetViewService();    panorama = new google.maps.StreetViewPanorama(     document.getElementById("pano")   );   // Gear up the map.   map = new google.maps.Map(certificate.getElementById("map"), {     middle: berkeley,     zoom: 16,     streetViewControl: false,   });   // Set the initial Street View photographic camera to the center of the map   sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);   // Look for a nearby Street View panorama when the map is clicked.   // getPanorama volition render the nearest pano when the given   // radius is 50 meters or less.   map.addListener("click", (event) => {     sv.getPanorama({ location: upshot.latLng, radius: 50 })       .then(processSVData)       .grab((due east) =>         panel.fault("Street View information not found for this location.")       );   }); }  role processSVData({ data }) {   const location = information.location;   const marker = new google.maps.Marker({     position: location.latLng,     map,     title: location.description,   });    panorama.setPano(location.pano);   panorama.setPov({     heading: 270,     pitch: 0,   });   panorama.setVisible(true);   marker.addListener("click", () => {     const markerPanoID = location.pano;      // Set the Pano to utilize the passed panoID.     panorama.setPano(markerPanoID);     panorama.setPov({       heading: 270,       pitch: 0,     });     panorama.setVisible(true);   }); }

CSS

/* Always set the map height explicitly to ascertain the size of the div        * element that contains the map. */ #map {   superlative: 100%; }  /* Optional: Makes the sample page fill the window. */ html, body {   pinnacle: 100%;   margin: 0;   padding: 0; }

HTML

<!DOCTYPE html> <html>   <caput>     <title>Direct Accessing Street View Data</title>     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>     <link rel="stylesheet" blazon="text/css" href="./style.css" />     <script src="./index.js"></script>   </head>   <torso>     <div id="map" style="width: 45%; meridian: 100%; float: left"></div>     <div id="pano" style="width: 45%; height: 100%; float: left"></div>      <!-- Async script executes immediately and must be after whatever DOM elements used in callback. -->     <script       src="https://maps.googleapis.com/maps/api/js?cardinal=YOUR_API_KEY&callback=initMap&5=weekly"       async     ></script>   </body> </html>

View example

/* * Click the map to fix a new location for the Street View camera. */ permit map; allow panorama; role initMap() { const berkeley = { lat: 37.869085, lng: -122.254775 }; const sv = new google.maps.StreetViewService(); panorama = new google.maps.StreetViewPanorama( document.getElementById("pano") ); // Gear up the map. map = new google.maps.Map(certificate.getElementById("map"), { center: berkeley, zoom: xvi, streetViewControl: false, }); // Fix the initial Street View camera to the center of the map sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData); // Look for a nearby Street View panorama when the map is clicked. // getPanorama will return the nearest pano when the given // radius is 50 meters or less. map.addListener("click", (event) => { sv.getPanorama({ location: event.latLng, radius: fifty }) .and then(processSVData) .take hold of((eastward) => console.error("Street View data not found for this location.") ); }); } function processSVData({ data }) { const location = data.location; const marker = new google.maps.Marker({ position: location.latLng, map, title: location.description, }); panorama.setPano(location.pano); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); mark.addListener("click", () => { const markerPanoID = location.pano; // Set up the Pano to utilise the passed panoID. panorama.setPano(markerPanoID); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); }); }

/* Always ready the map elevation explicitly to ascertain the size of the div * chemical element that contains the map. */ #map { meridian: 100%; } /* Optional: Makes the sample page make full the window. */ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Directly Accessing Street View Data</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>  </head> <trunk> <div id="map" way="width: 45%; height: 100%; bladder: left"></div> <div id="pano" mode="width: 45%; acme: 100%; float: left"></div>  <script src="https://maps.googleapis.com/maps/api/js?primal=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

Endeavour Sample

Providing Custom Street View Panoramas

The Maps JavaScript API supports the brandish of custom panoramas within the StreetViewPanorama object. Using custom panoramas, you can brandish the interior of buildings, views from scenic locations, or anything from your imagination. You can even link these custom panoramas to Google's existing Street View panoramas.

Setting up a set of custom panorama imagery involves the following steps:

Create a base of operations panoramic image for each custom panorama. This base of operations image should be at the highest resolution image with which you wish to serve zoomed in imagery.
(Optional, but recommended) Create a ready of panoramic tiles at unlike zoom levels from the bones epitome.
Create links between your custom panoramas.
(Optional) Designate "entry" panoramas within Google'southward existing Street View imagery and customize links to/from the custom gear up to the standard set.
Define metadata for each panorama prototype within a StreetViewPanoramaData object.
Implement a method which determines the custom panorama data and images and designate that method as your custom handler inside the StreetViewPanorama object.

The following sections explain this process.

Creating Custom Panoramas

Each Street View panorama is an image or set of images that provides a full 360 degree view from a unmarried location. The StreetViewPanorama object uses images that conform to the equirectangular (Plate Carrée) projection. Such a projection contains 360 degrees of horizontal view (a total wrap-around) and 180 degrees of vertical view (from direct up to straight down). These fields of view consequence in an image with an attribute ratio of 2:1. A full wrap-effectually panorama is shown below.

Panorama images are mostly obtained by taking multiple photos from ane position and stitching them together using panorama software. (Meet Wikipedia's Comparing of photo stitching applications for more data.) Such images should share a unmarried "photographic camera" locus, from which each of the panorama images are taken. The resulting 360 degree panorama can then define a projection on a sphere with the image wrapped to the two-dimensional surface of the sphere.

Treating the panorama as a projection on a sphere with a rectilinear coordinate system is advantageous when dividing up the image into rectilinear tiles, and serving images based on computed tile coordinates.

Creating Custom Panorama Tiles

Street View also supports different levels of image detail through the employ of a zoom command, which allows you to zoom in and out from the default view. Generally, Street View provides five levels of zoom resolution for any given panorama paradigm. If you lot were to rely on a single panorama image to serve all zoom levels, such an image would either necessarily be quite large and significantly tedious down your application, or exist of such poor resolution at higher zoom levels that you would serve a poorly pixellated image. Luckily, however, we tin employ a similar pattern blueprint used to serve Google'due south map tiles at different zoom levels to provide appropriate resolution imagery for panoramas at each zoom level.

When a StreetViewPanorama starting time loads, by default it displays an image consisting of 25% (90 degrees of arc) of the horizontal breadth of the panorama at zoom level i. This view corresponds roughly with a normal homo field of view. Zooming "out" from this default view essentially provides a wider arc, while zooming in narrows the field of a view to a smaller arc. The StreetViewPanorama automatically calculates the advisable field of view for the selected zoom level, and then selects imagery almost appropriate for that resolution by selecting a tile ready that roughly matches the dimensions of the horizontal field of view. The post-obit fields of view map to Street View zoom levels:

Street View zoom level	Field of View (degrees)
0	180
i (default)	90
2	45
3	22.5
4	11.25

Note that the size of the prototype shown within Street View is entirely dependent on the screen size (width) of the Street View container. If you provide a wider container, the service will still provide the same field of view for whatsoever given zoom level, though it may select tiles more appropriate for that resolution instead.

Because each panorama consists of an equirectangular project, creating panorama tiles is relatively like shooting fish in a barrel. Equally the projection provides an image with an attribute ratio of 2:1, tiles with 2:1 ratios are easier to use, though square tiles may provide better operation on square maps (since the field of view will exist foursquare).

For 2:1 tiles, a single image encompassing the unabridged panorama represents the entire panorama "world" (the base prototype) at zoom level 0, with each increasing zoom level offering iv^zoomLevel tiles. (East.yard. at zoom level 2, the unabridged panorama consists of xvi tiles.) Note: zoom levels in Street View tiling practise not match directly to zoom levels as provided using the Street View control; instead the Street View command zoom levels select a Field of View (FoV), from which appropriate tiles are selected.

Generally, you will want to name your image tiles so they can exist selected programmatically. Such a naming scheme is discussed below in Handling Custom Panorama Requests.

Handling Custom Panorama Requests

To use a custom panorama, call StreetViewPanorama.registerPanoProvider(), specifying the name of your custom panorama provider method. The panorama provider method must return a StreetViewPanoramaData object, and has the post-obit signature:

Office(pano):StreetViewPanoramaData

A StreetViewPanoramaData is an object of the post-obit form:

{   copyright: string,   location: {     description: string,     latLng: google.maps.LatLng,     pano: string   },   tiles: {     tileSize: google.maps.Size,     worldSize: google.maps.Size,     heading: number,     getTileUrl: Function   },   links: [     description: string,     heading: number,     pano: string,     roadColor: string,     roadOpacity: number   ] }

Display a custom panorama every bit follows:

Set the StreetViewPanoramaOptions.pano property to a custom value.
Telephone call StreetViewPanorama.registerPanoProvider() to supply a custom panorama provider function.
Implement your custom panorama provider function to handle the specified pano value.
Construct a StreetViewPanoramaData object.
Ready the StreetViewTileData.getTileUrl holding to the name of a custom tile provider office that y'all supply. For example, getCustomPanoramaTileUrl.
Implement your custom tile provider function, as shown in the samples below.
Return the StreetViewPanoramaData object.

Note: Do not straight fix a position on the StreetViewPanorama when you wish to display custom panoramas, equally such a position will instruct the Street View service to request the default Street View imagery close to that location. Instead, gear up this position within the custom StreetViewPanoramaData object'due south location.latLng field.

The following example displays a custom panorama of the Google Sydney office. Note that that this example doesn't use a map or default Street View imagery:

TypeScript

role initPano() {   // Gear up Street View and initially set information technology visible. Register the   // custom panorama provider function. Gear up the StreetView to display   // the custom panorama 'reception' which we check for beneath.   const panorama = new google.maps.StreetViewPanorama(     certificate.getElementById("map") as HTMLElement,     { pano: "reception", visible: true }   );    panorama.registerPanoProvider(getCustomPanorama); }  // Return a pano image given the panoID. function getCustomPanoramaTileUrl(   pano: cord,   zoom: number,   tileX: number,   tileY: number ): cord {   return (     "https://developers.google.com/maps/documentation/javascript/examples/total/images/" +     "panoReception1024-" +     zoom +     "-" +     tileX +     "-" +     tileY +     ".jpg"   ); }  // Construct the advisable StreetViewPanoramaData given // the passed pano IDs. function getCustomPanorama(pano: string): google.maps.StreetViewPanoramaData {   if (pano === "reception") {     return {       location: {         pano: "reception",         description: "Google Sydney - Reception",       },       links: [],       // The text for the copyright control.       copyright: "Imagery (c) 2010 Google",       // The definition of the tiles for this panorama.       tiles: {         tileSize: new google.maps.Size(1024, 512),         worldSize: new google.maps.Size(2048, 1024),         // The heading in degrees at the origin of the panorama         // tile set.         centerHeading: 105,         getTileUrl: getCustomPanoramaTileUrl,       },     };   }   // @ts-ignore TODO(jpoehnelt) fix typings   return null; }

JavaScript

office initPano() {   // Set up Street View and initially set it visible. Register the   // custom panorama provider function. Ready the StreetView to display   // the custom panorama 'reception' which nosotros check for below.   const panorama = new google.maps.StreetViewPanorama(     document.getElementById("map"),     { pano: "reception", visible: truthful }   );    panorama.registerPanoProvider(getCustomPanorama); }  // Return a pano image given the panoID. office getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {   return (     "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +     "panoReception1024-" +     zoom +     "-" +     tileX +     "-" +     tileY +     ".jpg"   ); }  // Construct the advisable StreetViewPanoramaData given // the passed pano IDs. role getCustomPanorama(pano) {   if (pano === "reception") {     return {       location: {         pano: "reception",         description: "Google Sydney - Reception",       },       links: [],       // The text for the copyright control.       copyright: "Imagery (c) 2010 Google",       // The definition of the tiles for this panorama.       tiles: {         tileSize: new google.maps.Size(1024, 512),         worldSize: new google.maps.Size(2048, 1024),         // The heading in degrees at the origin of the panorama         // tile set.         centerHeading: 105,         getTileUrl: getCustomPanoramaTileUrl,       },     };   }   return null; }

CSS

/* Always set the map height explicitly to ascertain the size of the div        * element that contains the map. */ #map {   height: 100%; }  /* Optional: Makes the sample page fill the window. */ html, body {   meridian: 100%;   margin: 0;   padding: 0; }

HTML

<!DOCTYPE html> <html>   <head>     <title>Custom Street View Panoramas</title>     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>     <link rel="stylesheet" blazon="text/css" href="./style.css" />     <script src="./index.js"></script>   </head>   <body>     <div id="map"></div>      <!-- Async script executes immediately and must be subsequently whatever DOM elements used in callback. -->     <script       src="https://maps.googleapis.com/maps/api/js?cardinal=YOUR_API_KEY&callback=initPano&v=weekly"       async     ></script>   </torso> </html>

View example

role initPano() { // Set up upwardly Street View and initially set it visible. Register the // custom panorama provider office. Set the StreetView to display // the custom panorama 'reception' which we cheque for beneath. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map"), { pano: "reception", visible: true } ); panorama.registerPanoProvider(getCustomPanorama); } // Return a pano image given the panoID. office getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) { render ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); } // Construct the appropriate StreetViewPanoramaData given // the passed pano IDs. role getCustomPanorama(pano) { if (pano === "reception") { return { location: { pano: "reception", description: "Google Sydney - Reception", }, links: [], // The text for the copyright control. copyright: "Imagery (c) 2010 Google", // The definition of the tiles for this panorama. tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), // The heading in degrees at the origin of the panorama // tile set. centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl, }, }; } render zippo; }

/* E'er set up the map elevation explicitly to define the size of the div * element that contains the map. */ #map { pinnacle: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { pinnacle: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <caput> <title>Custom Street View Panoramas</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>  </head> <torso> <div id="map"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&5=weekly&channel=2" async ></script> </body> </html>

Try Sample

The custom panorama provider returns the appropriate tile given the passed panorama ID, zoom level, and panorama tile coordinates. Since image pick depends on these passed values, it is useful to name images that tin can be selected programmatically given those passed values, such as pano_zoom_tileX_tileY.png.

The post-obit example adds another arrow to the image, in addition to the default Street View navigation arrows, that points into Google Sydney and links to the custom imagery:

TypeScript

let panorama: google.maps.StreetViewPanorama;  // StreetViewPanoramaData of a panorama just exterior the Google Sydney role. permit outsideGoogle: google.maps.StreetViewPanoramaData;  // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData(): google.maps.StreetViewPanoramaData {   return {     location: {       pano: "reception", // The ID for this custom panorama.       description: "Google Sydney - Reception",       latLng: new google.maps.LatLng(-33.86684, 151.19583),     },     links: [       {         heading: 195,         clarification: "Exit",         pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano,       },     ],     copyright: "Imagery (c) 2010 Google",     tiles: {       tileSize: new google.maps.Size(1024, 512),       worldSize: new google.maps.Size(2048, 1024),       centerHeading: 105,       getTileUrl: role (         pano: string,         zoom: number,         tileX: number,         tileY: number       ): string {         return (           "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +           "panoReception1024-" +           zoom +           "-" +           tileX +           "-" +           tileY +           ".jpg"         );       },     },   }; }  function initPanorama() {   panorama = new google.maps.StreetViewPanorama(     certificate.getElementById("street-view") equally HTMLElement,     { pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano }   );   // Register a provider for the custom panorama.   panorama.registerPanoProvider(     (pano: string): google.maps.StreetViewPanoramaData => {       if (pano === "reception") {         return getReceptionPanoramaData();       }       // @ts-ignore TODO(jpoehnelt) ready typings       render cypher;     }   );    // Add a link to our custom panorama from exterior the Google Sydney part.   panorama.addListener("links_changed", () => {     if (       panorama.getPano() ===       (outsideGoogle.location equally google.maps.StreetViewLocation).pano     ) {       panorama.getLinks().push({         description: "Google Sydney",         heading: 25,         pano: "reception",       });     }   }); }  role initMap(): void {   // Use the Street View service to find a pano ID on Pirrama Rd, outside the   // Google function.   new google.maps.StreetViewService()     .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })     .then(({ information }: google.maps.StreetViewResponse) => {       outsideGoogle = data;       initPanorama();     }); }

JavaScript

let panorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney role. permit outsideGoogle;  // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData() {   return {     location: {       pano: "reception",       description: "Google Sydney - Reception",       latLng: new google.maps.LatLng(-33.86684, 151.19583),     },     links: [       {         heading: 195,         description: "Exit",         pano: outsideGoogle.location.pano,       },     ],     copyright: "Imagery (c) 2010 Google",     tiles: {       tileSize: new google.maps.Size(1024, 512),       worldSize: new google.maps.Size(2048, 1024),       centerHeading: 105,       getTileUrl: function (pano, zoom, tileX, tileY) {         return (           "https://developers.google.com/maps/documentation/javascript/examples/total/images/" +           "panoReception1024-" +           zoom +           "-" +           tileX +           "-" +           tileY +           ".jpg"         );       },     },   }; }  function initPanorama() {   panorama = new google.maps.StreetViewPanorama(     certificate.getElementById("street-view"),     { pano: outsideGoogle.location.pano }   );   // Register a provider for the custom panorama.   panorama.registerPanoProvider((pano) => {     if (pano === "reception") {       return getReceptionPanoramaData();     }     render cipher;   });   // Add together a link to our custom panorama from exterior the Google Sydney part.   panorama.addListener("links_changed", () => {     if (panorama.getPano() === outsideGoogle.location.pano) {       panorama.getLinks().push({         clarification: "Google Sydney",         heading: 25,         pano: "reception",       });     }   }); }  function initMap() {   // Employ the Street View service to find a pano ID on Pirrama Rd, outside the   // Google office.   new google.maps.StreetViewService()     .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })     .and then(({ data }) => {       outsideGoogle = data;       initPanorama();     }); }

CSS

html, torso {   height: 100%;   margin: 0;   padding: 0; }  #street-view {   meridian: 100%; }

HTML

<!DOCTYPE html> <html>   <head>     <title>Custom Street View Panorama Tiles</title>     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>     <link rel="stylesheet" type="text/css" href="./style.css" />     <script src="./index.js"></script>   </caput>   <trunk>     <div id="street-view"></div>      <!-- Async script executes immediately and must exist after whatsoever DOM elements used in callback. -->     <script       src="https://maps.googleapis.com/maps/api/js?fundamental=YOUR_API_KEY&callback=initMap&v=weekly"       async     ></script>   </torso> </html>

View example

let panorama; // StreetViewPanoramaData of a panorama merely outside the Google Sydney office. let outsideGoogle; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData() { return { location: { pano: "reception", description: "Google Sydney - Reception", latLng: new google.maps.LatLng(-33.86684, 151.19583), }, links: [ { heading: 195, clarification: "Go out", pano: outsideGoogle.location.pano, }, ], copyright: "Imagery (c) 2010 Google", tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), centerHeading: 105, getTileUrl: function (pano, zoom, tileX, tileY) { return ( "https://developers.google.com/maps/documentation/javascript/examples/total/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); }, }, }; } function initPanorama() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view"), { pano: outsideGoogle.location.pano } ); // Register a provider for the custom panorama. panorama.registerPanoProvider((pano) => { if (pano === "reception") { return getReceptionPanoramaData(); } render null; }); // Add a link to our custom panorama from outside the Google Sydney part. panorama.addListener("links_changed", () => { if (panorama.getPano() === outsideGoogle.location.pano) { panorama.getLinks().push({ description: "Google Sydney", heading: 25, pano: "reception", }); } }); } function initMap() { // Use the Street View service to notice a pano ID on Pirrama Rd, outside the // Google function. new google.maps.StreetViewService() .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } }) .and then(({ data }) => { outsideGoogle = data; initPanorama(); }); }

html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; }

<!DOCTYPE html> <html> <head> <title>Custom Street View Panorama Tiles</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>  </caput> <body> <div id="street-view"></div>  <script src="https://maps.googleapis.com/maps/api/js?fundamental=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&aqueduct=2" async ></script> </body> </html>

Try Sample

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, encounter the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Terminal updated 2022-03-17 UTC.

brownentreirs.blogspot.com

Source: https://developers.google.com/maps/documentation/javascript/streetview

When Will Street View Come Thru Again

Street View Service

Overview

Street View Map Usage

Street View Panoramas

Street View Containers

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

TypeScript

JavaScript

CSS

HTML

Endeavour Sample

Movement tracking on mobile devices

Overlays within Street View

TypeScript

JavaScript

CSS

HTML

Try Sample

Street View Events

TypeScript

JavaScript

CSS

HTML

Try Sample

Street View Controls

TypeScript

JavaScript

CSS

HTML

Try Sample

Directly Accessing Street View Data

Street View Service Requests

Street View Service Responses

TypeScript

JavaScript

CSS

HTML

Endeavour Sample

Providing Custom Street View Panoramas

Creating Custom Panoramas

Creating Custom Panorama Tiles

Handling Custom Panorama Requests

TypeScript

JavaScript

CSS

HTML

Try Sample

TypeScript

JavaScript

CSS

HTML

Try Sample

Post a Comment for "When Will Street View Come Thru Again"