MAPG-10 query new position with AJAX

check if pano at position exists
load new pano after guess

public/static/js/mapguesser.js

@@ -45,26 +45,14 @@ var MapManipulator = {
     }
 };
 
+var realPosition;
 var panorama;
 var guessMap;
 var guessMarker;
 var googleLink;
 
 function initialize() {
-    panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
+    getNewPosition();
-        position: realPosition,
-        disableDefaultUI: true,
-        linksControl: true,
-        showRoadLabels: false
-    });
-
-    panorama.addListener('position_changed', function () {
-        MapManipulator.rewriteGoogleLink();
-    });
-
-    panorama.addListener('pov_changed', function () {
-        MapManipulator.rewriteGoogleLink();
-    });
 
     guessMap = new google.maps.Map(document.getElementById('guessMap'), {
         disableDefaultUI: true,
@@ -90,6 +78,48 @@ function initialize() {
     });
 }
 
+function getNewPosition() {
+    var xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            realPosition = this.response.position;
+
+            var sv = new google.maps.StreetViewService();
+            sv.getPanorama({ location: this.response.position, preference: google.maps.StreetViewPreference.BEST }, loadPano);
+        }
+    };
+    xhr.open('GET', 'getNewPosition.json', true);
+    xhr.send();
+}
+
+function loadPano(data, status) {
+    if (status !== google.maps.StreetViewStatus.OK) {
+        getNewPosition();
+        return;
+    }
+
+    if (panorama) {
+        panorama.setPano(data.location.pano);
+        return;
+    }
+
+    panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
+        pano: data.location.pano,
+        disableDefaultUI: true,
+        linksControl: true,
+        showRoadLabels: false
+    });
+
+    panorama.addListener('position_changed', function () {
+        MapManipulator.rewriteGoogleLink();
+    });
+
+    panorama.addListener('pov_changed', function () {
+        MapManipulator.rewriteGoogleLink();
+    });
+}
+
 document.getElementById('guessButton').onclick = function () {
     if (!guessMarker) {
         return;
@@ -98,7 +128,13 @@ document.getElementById('guessButton').onclick = function () {
     var guessedPosition = guessMarker.getPosition();
     var distance = Util.calculateDistance(realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() });
 
-    alert('You were ' + distance + 'm close!');
+    alert('You were ' + (Math.round(distance) / 1000) + ' km close!');
 
-    this.blur();
+    this.disabled = true;
+    guessMarker.setMap(null);
+    guessMarker = null;
+    //TODO: fit to the same size as on init
+    guessMap.fitBounds(guessMapBounds);
+
+    getNewPosition();
 }