Read the documentation or view this example full screen.
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>
Need help? Visit our