This example displays a [`StreetViewPanorama`](https://developers.google.com/maps/documentation/javascript/reference/street-view.md.txt#StreetViewPanorama) within a separate `
` element, rather than in conjunction with a map. Read the [documentation](https://developers.google.com/maps/documentation/javascript/streetview.md.txt#StreetViewContainers). ### TypeScript ```typescript let panorama: google.maps.StreetViewPanorama; function initialize() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view") as HTMLElement, { position: { lat: 37.86926, lng: -122.254811 }, pov: { heading: 165, pitch: 0 }, zoom: 1, } ); } declare global { interface Window { initialize: () => void; } } window.initialize = initialize; ``` > [!NOTE] > **Note:** Read the [guide](https://developers.google.com/maps/documentation/javascript/using-typescript.md.txt) on using TypeScript and Google Maps. ### JavaScript ```javascript let panorama; function initialize() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view"), { position: { lat: 37.86926, lng: -122.254811 }, pov: { heading: 165, pitch: 0 }, zoom: 1, }, ); } window.initialize = initialize; ``` > [!NOTE] > **Note:** The JavaScript is compiled from the TypeScript snippet. ### CSS ```css html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; } ``` ### HTML ```html Street View Containers
``` ### Clone Sample Git and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. ```javascript git clone -b sample-streetview-embed https://github.com/googlemaps/js-samples.git cd js-samples npm i npm start ``` Other samples can be tried by switching to any branch beginning with `sample-SAMPLE_NAME`. ```javascript git checkout sample-SAMPLE_NAME npm i npm start ```