diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js index 1dc203d..4b85e78 100644 --- a/public/static/js/mapguesser.js +++ b/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'), { - position: realPosition, - disableDefaultUI: true, - linksControl: true, - showRoadLabels: false - }); - - panorama.addListener('position_changed', function () { - MapManipulator.rewriteGoogleLink(); - }); - - panorama.addListener('pov_changed', function () { - MapManipulator.rewriteGoogleLink(); - }); + getNewPosition(); 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(); }