Download Pictures, Photospheres and Streetview Panoramas from Google Maps

let currentURL = window.location.href;
let panoId = currentURL.match(/!1s(.+?)!/)[1];
let newURL = "https://lh3.ggpht.com/p/" + panoId + "=s8000";
window.open(newURL, '_blank').focus();

// zoomLevel = zoom level of streetview. We start at 4 and recursively fail back to 3 from within this function if necessary 
function downloadSphere( zoomLevel )
{

  // grab panorama ID
  var currentURL = window.location.href;
  var panoId = currentURL.match(/!1s(.+?)!/)[1];
 
  // maximum possible x and y values. For zoom level 4 in car view - we're fetching 128 tile images, each one 512x512 px
  var max_x = 15;
  var max_y = 7;
  // actual x and y counts - in case sphere is not the max size
  var actual_x = 0;
  var actual_y = 0;
  
  
  // create invisible canvas element - in our maximum hypothetical size
  var canvas = document.createElement('canvas');
  canvas.width = (max_x + 1) * 512;
  canvas.height = (max_y + 1) * 512;

  var context = canvas.getContext('2d');
  
  // total number of images we're loading. will help us determine when all tiles are loaded
  var allimages = (max_x+1) * (max_y+1);


  // when we're done painting all the tiles to canvas, export it as an image into a new tab
  function exportCanvas()
  {
	  
	// hardcoded case: if x=0 and y=0 then fall back to zoom 3. There are also older spheres zoom 5 is available with 256x256 tiles, but we don't bother with that.
	if( actual_x == 0 && actual_y == 0 )
	{ 
		//alert("No tiles retrieved at Zoom Level 4. Falling back to Zoom 3.")
		return( downloadSphere(3))
	}
	
	//create our "final" canvas, potentially smaller than the hypothetical large canvas
	var canvasCropped = document.createElement('canvas')
	canvasCropped.width = (actual_x + 1) * 512
	canvasCropped.height = (actual_y + 1) * 512
	
	// hardcoded case for x=12 and y=6 grid - it has a black band running along the bottom that needs to be cropped
	if( actual_x == 12 && actual_y == 6 ){ canvasCropped.height -= 256; }
	
	// hardcoded case for x=6 and y=3 grid - 2007 sphere: it has a black band on the bottom and an extra column of tiles on the right
	if( actual_x == 6 && actual_y == 3 ){ canvasCropped.height -= 384; canvasCropped.width -= 256; }

	var contextCropped = canvasCropped.getContext('2d')
	
	contextCropped.drawImage( canvas, 0, 0)	// draw the contents of the first canvas into our cropped-size canvas
	
	// Chrome-specific workaround: Chrome doesn't allow opening base64 URLs from code
	var new_window = window.open();
	new_window.document.body.appendChild( canvasCropped ) // will save the image as PNG, but it solves an intractable issue in Firefox. I suspect it was due to their 32MB Data URL limit

  }


  // The below code loads all the image tiles and composes them in a grid
  
  // closures https://stackoverflow.com/questions/1552941/how-does-a-function-in-a-loop-which-returns-another-function-work 
  for( let x = 0; x <= max_x; x++ )
  {
	for( let y = 0; y <= max_y; y++ )
	{
		let img = new Image();
		img.crossOrigin = "anonymous";
		img.src = "https://streetviewpixels-pa.googleapis.com/v1/tile?cb_client=maps_sv.tactile&panoid="+panoId+"&x="+x+"&y="+y+"&zoom="+zoomLevel+"&nbt=1&fover=2";
		
		img.onload = function( x, y) {				// must wait for the image to load before you try to draw it
			return function()
			{
				//console.log("good x="+x+" y="+y)
				context.drawImage(img, 512 * x, 512 * y);
				
				// increment the "actual" x and y dimensions. That way we'll figure out the available number of tiles on the fly
				if( x > actual_x ){ actual_x = x; }
				if( y > actual_y ){ actual_y = y; }
				
				allimages--;
			
				if( allimages == 0 ) // this is the last tile to load - open the final image in new tab
				{
					//console.log("actual X: "+actual_x+" -- actual Y: "+actual_y)
					exportCanvas() // create new tab with our canvas as an image
					
				}
				
				
			}
		}(x,y);
		
		// errors in loading are ok - just means we're trying to load a bigger image than actually exists
		img.onerror = function(mysource){
						return function()
						{
							//console.log("err x="+x+" y="+y)
							allimages--; // do this so we generate an image even if it is missing tiles

						
							if( allimages == 0 ) // this is the last tile to load - open the final image in new tab
							{
								//console.log("actual X: "+actual_x+" -- actual Y: "+actual_y)
								exportCanvas()

							}
						}
					}(img.src);
	
	}
  
  }

} // downloadSphere

downloadSphere( 4 )