functioninitPano(){// Set up Street View and initially set it visible. Register the// custom panorama provider function. Set the StreetView to display// the custom panorama 'reception' which we check for below.constpanorama=newgoogle.maps.StreetViewPanorama(document.getElementById("map")asHTMLElement,{pano:"reception",visible:true});panorama.registerPanoProvider(getCustomPanorama);}// Return a pano image given the panoID.functiongetCustomPanoramaTileUrl(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");}// Construct the appropriate StreetViewPanoramaData given// the passed pano IDs.functiongetCustomPanorama(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:newgoogle.maps.Size(1024,512),worldSize:newgoogle.maps.Size(2048,1024),// The heading in degrees at the origin of the panorama// tile set.centerHeading:105,getTileUrl:getCustomPanoramaTileUrl,},};}// @ts-ignore TODO fix typingsreturnnull;}declareglobal{interfaceWindow{initPano:()=>void;}}window.initPano=initPano;
functioninitPano(){// Set up Street View and initially set it visible. Register the// custom panorama provider function. Set the StreetView to display// the custom panorama 'reception' which we check for below.constpanorama=newgoogle.maps.StreetViewPanorama(document.getElementById("map"),{pano:"reception",visible:true},);panorama.registerPanoProvider(getCustomPanorama);}// Return a pano image given the panoID.functiongetCustomPanoramaTileUrl(pano,zoom,tileX,tileY){return("https://developers.google.com/maps/documentation/javascript/examples/full/images/"+"panoReception1024-"+zoom+"-"+tileX+"-"+tileY+".jpg");}// Construct the appropriate StreetViewPanoramaData given// the passed pano IDs.functiongetCustomPanorama(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:newgoogle.maps.Size(1024,512),worldSize:newgoogle.maps.Size(2048,1024),// The heading in degrees at the origin of the panorama// tile set.centerHeading:105,getTileUrl:getCustomPanoramaTileUrl,},};}// @ts-ignore TODO fix typingsreturnnull;}window.initPano=initPano;
/** Always set the map height 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;}
<html>
<head>
<title>Custom Street View Panoramas</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
defer
></script>
</body>
</html>
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eThis example demonstrates how to create a custom Street View panorama using the Google Maps JavaScript API.\u003c/p\u003e\n"],["\u003cp\u003eIt showcases a custom panorama of the Google Sydney office without using a map or default Street View imagery.\u003c/p\u003e\n"],["\u003cp\u003eThe code defines functions to fetch custom panorama tiles and construct StreetViewPanoramaData.\u003c/p\u003e\n"],["\u003cp\u003eBoth TypeScript and JavaScript code snippets are provided, with the JavaScript version compiled from TypeScript.\u003c/p\u003e\n"],["\u003cp\u003eYou can explore the sample interactively through JSFiddle or Google Cloud Shell, or clone the repository to run it locally.\u003c/p\u003e\n"]]],["This code creates a custom panorama of the Google Sydney office, replacing default Street View imagery. It initializes a `StreetViewPanorama`, setting it to visible and registering a custom panorama provider (`getCustomPanorama`). This provider function, given a pano ID, defines the panorama's location, links, copyright, and tile information, including how to fetch tiles (`getCustomPanoramaTileUrl`). The CSS code ensures the panorama container fills the window. The HTML loads the script after parsing the page and includes the API key.\n"],null,["# Custom Street View Panoramas\n\nThis example displays a custom panorama of the Google Sydney office. Note that\nthis example doesn't use a map or default Street View imagery.\n\nRead the\n[documentation](/maps/documentation/javascript/streetview#CreatingPanoramas). \n\n### TypeScript\n\n```typescript\nfunction initPano() {\n // Set up Street View and initially set it visible. Register the\n // custom panorama provider function. Set the StreetView to display\n // the custom panorama 'reception' which we check for below.\n const panorama = new google.maps.StreetViewPanorama(\n document.getElementById(\"map\") as HTMLElement,\n { pano: \"reception\", visible: true }\n );\n\n panorama.registerPanoProvider(getCustomPanorama);\n}\n\n// Return a pano image given the panoID.\nfunction getCustomPanoramaTileUrl(\n pano: string,\n zoom: number,\n tileX: number,\n tileY: number\n): string {\n return (\n \"https://developers.google.com/maps/documentation/javascript/examples/full/images/\" +\n \"panoReception1024-\" +\n zoom +\n \"-\" +\n tileX +\n \"-\" +\n tileY +\n \".jpg\"\n );\n}\n\n// Construct the appropriate StreetViewPanoramaData given\n// the passed pano IDs.\nfunction getCustomPanorama(pano: string): google.maps.StreetViewPanoramaData {\n if (pano === \"reception\") {\n return {\n location: {\n pano: \"reception\",\n description: \"Google Sydney - Reception\",\n },\n links: [],\n // The text for the copyright control.\n copyright: \"Imagery (c) 2010 Google\",\n // The definition of the tiles for this panorama.\n tiles: {\n tileSize: new google.maps.Size(1024, 512),\n worldSize: new google.maps.Size(2048, 1024),\n // The heading in degrees at the origin of the panorama\n // tile set.\n centerHeading: 105,\n getTileUrl: getCustomPanoramaTileUrl,\n },\n };\n }\n // @ts-ignore TODO fix typings\n return null;\n}\n\ndeclare global {\n interface Window {\n initPano: () =\u003e void;\n }\n}\nwindow.initPano = initPano;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/streetview-custom-simple/index.ts#L10-L73\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nfunction initPano() {\n // Set up Street View and initially set it visible. Register the\n // custom panorama provider function. Set the StreetView to display\n // the custom panorama 'reception' which we check for below.\n const panorama = new google.maps.StreetViewPanorama(\n document.getElementById(\"map\"),\n { pano: \"reception\", visible: true },\n );\n\n panorama.registerPanoProvider(getCustomPanorama);\n}\n\n// Return a pano image given the panoID.\nfunction getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {\n return (\n \"https://developers.google.com/maps/documentation/javascript/examples/full/images/\" +\n \"panoReception1024-\" +\n zoom +\n \"-\" +\n tileX +\n \"-\" +\n tileY +\n \".jpg\"\n );\n}\n\n// Construct the appropriate StreetViewPanoramaData given\n// the passed pano IDs.\nfunction getCustomPanorama(pano) {\n if (pano === \"reception\") {\n return {\n location: {\n pano: \"reception\",\n description: \"Google Sydney - Reception\",\n },\n links: [],\n // The text for the copyright control.\n copyright: \"Imagery (c) 2010 Google\",\n // The definition of the tiles for this panorama.\n tiles: {\n tileSize: new google.maps.Size(1024, 512),\n worldSize: new google.maps.Size(2048, 1024),\n // The heading in degrees at the origin of the panorama\n // tile set.\n centerHeading: 105,\n getTileUrl: getCustomPanoramaTileUrl,\n },\n };\n }\n // @ts-ignore TODO fix typings\n return null;\n}\n\nwindow.initPano = initPano;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/streetview-custom-simple/docs/index.js#L8-L61\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\n### CSS\n\n```css\n/* \n * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\n#map {\n height: 100%;\n}\n\n/* \n * Optional: Makes the sample page fill the window. \n */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\nhttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/streetview-custom-simple/docs/style.css#L7-L24\n```\n\n### HTML\n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eCustom Street View Panoramas\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003c!-- \n The `defer` attribute causes the script to execute after the full HTML\n document has been parsed. For non-blocking uses, avoiding race conditions,\n and consistent behavior across browsers, consider loading using Promises. See\n https://developers.google.com/maps/documentation/javascript/load-maps-js-api\n for more information.\n --\u003e\n \u003cscript\n src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly\"\n defer\n \u003e\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/streetview-custom-simple/docs/index.html#L8-L30\n```\n\n### Try Sample\n\n[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/streetview-custom-simple/jsfiddle) [Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-streetview-custom-simple&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\n### Clone Sample\n\n\nGit 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. \n\n git clone -b sample-streetview-custom-simple https://github.com/googlemaps/js-samples.git\n cd js-samples\n npm i\n npm start\n\n\nOther samples can be tried by switching to any branch beginning with `sample-`\u003cvar translate=\"no\"\u003eSAMPLE_NAME\u003c/var\u003e. \n\n git checkout sample-\u003cvar translate=\"no\"\u003e\u003cspan class=\"devsite-syntax-nx\"\u003eSAMPLE_NAME\u003c/span\u003e\u003c/var\u003e\n npm i\n npm start"]]
