Page Summary
-
This example demonstrates how to create a custom Street View panorama using the Google Maps JavaScript API.
-
It showcases a custom panorama of the Google Sydney office without using a map or default Street View imagery.
-
The code defines functions to fetch custom panorama tiles and construct StreetViewPanoramaData.
-
Both TypeScript and JavaScript code snippets are provided, with the JavaScript version compiled from TypeScript.
-
You can explore the sample interactively through JSFiddle or Google Cloud Shell, or clone the repository to run it locally.
This example displays a custom panorama of the Google Sydney office. Note that this example doesn't use a map or default Street View imagery.
Read the documentation.
TypeScript
async function init(): Promise<void> { // Request needed libraries. const [{ StreetViewPanorama }, { Size }] = await Promise.all([ google.maps.importLibrary('streetView'), google.maps.importLibrary('core'), ]); // Construct the appropriate StreetViewPanoramaData given // the passed pano IDs. function getCustomPanorama( pano: string ): google.maps.StreetViewPanoramaData | null { 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 Size(1024, 512), worldSize: new Size(2048, 1024), // The heading in degrees at the origin of the panorama // tile set. centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl, }, }; } return null; } // 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. const panorama = new StreetViewPanorama(document.getElementById('map')!, { pano: 'reception', visible: true, }); panorama.registerPanoProvider(getCustomPanorama); } // Return a pano image given the panoID. function getCustomPanoramaTileUrl( pano: string, zoom: number, tileX: number, tileY: number ): string { return `https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-${String(zoom)}-${String(tileX)}-${String(tileY)}.jpg`; } void init();
JavaScript
async function init() { // Request needed libraries. const [{ StreetViewPanorama }, { Size }] = await Promise.all([ google.maps.importLibrary('streetView'), google.maps.importLibrary('core'), ]); // Construct the appropriate StreetViewPanoramaData given // the passed pano IDs. function 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 Size(1024, 512), worldSize: new Size(2048, 1024), // The heading in degrees at the origin of the panorama // tile set. centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl, }, }; } return null; } // 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. const panorama = new StreetViewPanorama(document.getElementById('map'), { pano: 'reception', visible: true, }); panorama.registerPanoProvider(getCustomPanorama); } // Return a pano image given the panoID. function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) { return `https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-${String(zoom)}-${String(tileX)}-${String(tileY)}.jpg`; } void init();
CSS
/* * 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
<html>
<head>
<title>Custom Street View Panoramas</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<script>
// prettier-ignore
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "GOOGLE_MAPS_API_KEY"
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. You will also need a Google Maps API key.
The following commands clone the repository, install dependencies, and copy the environment file.
git clone https://github.com/googlemaps-samples/js-api-samples.gitcd js-api-samplesnpm icp .env.template .env
Once you copy the environment file, make sure to open the .env file and replace <Insert your own development API key here> with your actual API key before starting the sample.
cd samples/streetview-custom-simplenpm start