Read the documentation or view this example fullscreen.
var panorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. var outsideGoogle; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData() { 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, 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/full/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(function(pano) { if (pano === 'reception') { return getReceptionPanoramaData(); } return null; }); // Add a link to our custom panorama from outside the Google Sydney office. panorama.addListener('links_changed', function() { if (panorama.getPano() === outsideGoogle.location.pano) { panorama.getLinks().push({ description: 'Google Sydney', heading: 25, pano: 'reception' }); } }); } function initialize() { // Use the Street View service to find a pano ID on Pirrama Rd, outside the // Google office. var streetviewService = new google.maps.StreetViewService; streetviewService.getPanorama( {location: {lat: -33.867386, lng: 151.195767}}, function(result, status) { if (status === 'OK') { outsideGoogle = result; initPanorama(); } }); }
<div id="street-view"></div>
html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"> </script>
Try it yourself
Hover at top right of the code block to copy the code or open it in JSFiddle.
<!DOCTYPE html> <html> <head> <title>Custom Street View panorama tiles</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; } </style> </head> <body> <div id="street-view"></div> <script> var panorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. var outsideGoogle; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData() { 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, 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/full/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(function(pano) { if (pano === 'reception') { return getReceptionPanoramaData(); } return null; }); // Add a link to our custom panorama from outside the Google Sydney office. panorama.addListener('links_changed', function() { if (panorama.getPano() === outsideGoogle.location.pano) { panorama.getLinks().push({ description: 'Google Sydney', heading: 25, pano: 'reception' }); } }); } function initialize() { // Use the Street View service to find a pano ID on Pirrama Rd, outside the // Google office. var streetviewService = new google.maps.StreetViewService; streetviewService.getPanorama( {location: {lat: -33.867386, lng: 151.195767}}, function(result, status) { if (status === 'OK') { outsideGoogle = result; initPanorama(); } }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"> </script> </body> </html>