streetmapme/script.js

'use strict';
/* global navigator google */

var pano, 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 ) {
		if (!sv) { var sv=new google.maps.StreetViewService(); }
		sv.getPanorama({
			location: {
				lat: loc.lat,
				lng: loc.lon
			},
			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);
		} });
	}
}

// Update street view image
function updateStreetView(loc){
	
	// Panorama hasn't loaded
	if ( typeof pano == 'undefined' ){
		// Wait one second and try again
		setTimeout(updateStreetView(loc),1000);
	}
	
	// Panorma has loaded
	else {
		
		// Get streetview data
		getStreetViewData(loc, 2, function(data){
			
			// Calculate bearing
			var brng;
			
			if (loc.spd>1){
				brng = loc.dir;
			}
			else { //https://stackoverflow.com/a/26609687/3006854
				brng = Math.atan2( loc.lat-data.location.latLng.lat(), loc.lon-data.location.latLng.lng() );
				brng = 450-(brng*(180/Math.PI)+360)%360;
			}

			// Set panorama
			pano.setPano(data.location.pano);				
			pano.setPov({
				pitch: 0,
				heading: brng
			});
		});
		
	}
	
}

// Track GPS location
if (!navigator.geolocation){
	alert("Geolocation not available!");
}
else { navigator.geolocation.watchPosition(
		
		// Got location
		function(pos) {
			newLoc = {
				lat: pos.coords.latitude,
				lon: pos.coords.longitude,
				spd: pos.coords.speed,
				dir: pos.coords.heading,
				tim: new Date()
			};
			updateStreetView(newLoc,10);
		},
		
		// Got error
		function() {
			//TODO: Show error
		}, 
		
		// Options
		{ enableHighAccuracy:true }
		
	);
}