Using google maps api, you can display panoramas on your site. Google builds a panorama of a set of tiles (small images). Is it possible to show a modified (your own) tile instead of the native google panorama tile (that is, you need to replace one of the tiles with your own)? If so, how?

    1 answer 1

    Probably meaning Custom Street View panorama tiles :

    <!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 '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 our custom panorama. panoProvider: function(pano) { if (pano === 'reception') { return getReceptionPanoramaData(); } } }); // 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 === google.maps.StreetViewStatus.OK) { outsideGoogle = result; initPanorama(); } }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize"> </script> </body> </html>

    You can apply your panorama by changing {location: {lat: -33.867386, lng: 151.195767}} to your data. With this tool you can get this data.

    • Thanks for the answer, but no. This code adds its own panorama, and does not change the google panorama part. - Ti Fix
    • I changed my answer and entered additional information. - nikant25