#1 Switched from panorama to image

index.html

@@ -28,7 +28,7 @@
 		
 		<!-- Styles -->
 		<style>
-			body, main {
+			body, main, main img {
 				margin: 0;
 				height: 100vh;
 				width: 100vw;
@@ -44,10 +44,11 @@
 		<noscript>You need javascript to use this. </noscript>
 		
 		<!-- Main container -->
-		<main></main>
+		<main><img/></main>
 		
 		<!-- Scripts -->
-		<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaDEDFAbk7Iefh9y61wuooDH2kWHRT_k8&callback=init"></script>
+		<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+		<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaDEDFAbk7Iefh9y61wuooDH2kWHRT_k8"></script>
 		<script src="script.js"></script>
 		
 	</body>

script.js

@@ -1,27 +1,18 @@
 'use strict';
-/* global navigator google */
+/* global $ navigator google */
 
-var pano, newLoc;
+var newLoc;
-
-// Create panorama
-function init(){
-	pano = new google.maps.StreetViewPanorama(
-		document.getElementsByTagName('main')[0], {
-			panControl: false,
-			zoomControl: false,
-			addressControl: false,
-			linksControl: false,
-			motionTracking: false,
-			motionTrackingControl: false
-		}
-	);
-}
 
 // Get street view imagery
 function getStreetViewData(loc,rad,cb) {
+	
 	// Ensure that the location hasn't changed (or this is the initial setting)
 	if ( newLoc == null || loc.tim===newLoc.tim ) {
+		
+		// Create service if it doesn't exist yet
 		if (!sv) { var sv=new google.maps.StreetViewService(); }
+		
+		// Retrieve data
 		sv.getPanorama({
 			location: {
 				lat: loc.lat,
@@ -29,20 +20,24 @@ function getStreetViewData(loc,rad,cb) {
 			},
 			radius: rad
 		}, function(data,status){ switch (status){
+			
 			// Success
 			case google.maps.StreetViewStatus.OK:
 				cb(data);
 				break;
+				
 			// No results in that radius
 			case google.maps.StreetViewStatus.ZERO_RESULTS:
 				// Try again with a bigger radius
 				getStreetViewData(loc,rad*2,cb);
 				break;
+				
 			// Error
 			default:
 				console.error(new Error(
 					'❌️ Street view not available: '+status
 				).message);
+				
 		} });
 	}
 }
@@ -50,38 +45,35 @@ function getStreetViewData(loc,rad,cb) {
 // Update street view image
 function updateStreetView(loc){
 	
-	// Panorama hasn't loaded
+	// Calculate bearing between user and position of streetview image
-	if ( typeof pano == 'undefined' ){
+	// https://stackoverflow.com/a/26609687/3006854
-		// Wait one second and try again
+	function getBearing(userLoc, imageLoc) {
-		setTimeout(updateStreetView(loc),1000);
+		return 90-(
+			Math.atan2( userLoc.lat-imageLoc.latLng.lat(), userLoc.lon-imageLoc.latLng.lng() )
+			* (180/Math.PI)	) % 360;
 	}
 	
-	// Panorma has loaded
+	// Get streetview data
-	else {
+	getStreetViewData(loc, 2, function(data){
+		console.log('https://maps.googleapis.com/maps/api/streetview?'+
+			'size='+ $('main img').width() +'x'+ $('main img').height() +
+			'&location='+ data.location.latLng.lat() +','+ data.location.latLng.lng() +
+			'&fov=90' + // Inclination
+			// Show direction if moving, point to user if stationary
+			'&heading='+ ( (loc.spd>2)? loc.dir: getBearing(loc,data.location) ).toString() +
+			'&key=AIzaSyAaDEDFAbk7Iefh9y61wuooDH2kWHRT_k8');
 		
-		// Get streetview data
+		// Set image to streetview
-		getStreetViewData(loc, 2, function(data){
+		$('main img').attr('src','https://maps.googleapis.com/maps/api/streetview?'+
-			
+			'size='+ $('main img').width() +'x'+ $('main img').height() +
-			// Calculate bearing
+			'&location='+ data.location.latLng.lat() +','+ data.location.latLng.lng() +
-			var brng;
+			'&fov=90' + // Inclination
-			
+			// Show direction if moving, point to user if stationary
-			if (loc.spd>1){
+			'&heading='+ ( (loc.spd>2)? loc.dir: getBearing(loc,data.location) ).toString() +
-				brng = loc.dir;
+			'&key=AIzaSyAaDEDFAbk7Iefh9y61wuooDH2kWHRT_k8'
-			}
+		);
-			else { //https://stackoverflow.com/a/26609687/3006854
-				brng = Math.atan2( loc.lat-data.location.latLng.lat(), loc.lon-data.location.latLng.lng() );
-				brng = 90-(brng*(180/Math.PI))%360;
-			}
-
-			// Set panorama
-			pano.setPano(data.location.pano);				
-			pano.setPov({
-				pitch: 0,
-				heading: brng
-			});
-		});
 		
-	}
+	});
 	
 }