MAPG-7 refactor JS to be more readable

load Google Maps API async

public/static/js/mapguesser.js

@@ -1,109 +1,134 @@
-Math.deg2rad = function (deg) {
+(function () {
-    return deg * (this.PI / 180.0);
+    var Core = {
-};
+        MAX_SCORE: 1000,
 
-var Util = {
+        realPosition: null,
-    EARTH_RADIUS_IN_METER: 6371000,
+        panorama: null,
+        guessMap: null,
+        guessMarker: null,
+        resultMap: null,
+        resultMarkers: { guess: null, real: null },
+        googleLink: null,
 
-    MAX_SCORE: 1000,
+        getNewPosition: function () {
+            var xhr = new XMLHttpRequest();
+            xhr.responseType = 'json';
+            xhr.onreadystatechange = function () {
+                if (this.readyState == 4 && this.status == 200) {
+                    Core.realPosition = this.response.position;
 
-    calculateDistance: function (position1, position2) {
+                    var sv = new google.maps.StreetViewService();
-        var lat1 = Math.deg2rad(position1.lat);
+                    sv.getPanorama({ location: this.response.position, preference: google.maps.StreetViewPreference.NEAREST }, Core.loadPano);
-        var lng1 = Math.deg2rad(position1.lng);
+                }
-        var lat2 = Math.deg2rad(position2.lat);
+            };
-        var lng2 = Math.deg2rad(position2.lng);
+            xhr.open('GET', 'getNewPosition.json', true);
+            xhr.send();
+        },
 
-        var angleCos = Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) +
+        loadPano: function (data, status) {
-            Math.sin(lat1) * Math.sin(lat2);
+            if (status !== google.maps.StreetViewStatus.OK) {
+                Core.getNewPosition();
+                return;
+            }
 
-        if (angleCos > 1.0) {
+            Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 1 });
-            angleCos = 1.0;
+            Core.panorama.setPano(data.location.pano);
-        }
+        },
 
-        var angle = Math.acos(angleCos);
+        calculateScore: function (distance) {
+            var goodness = 1.0 - distance / Math.sqrt(mapArea);
 
-        return angle * Util.EARTH_RADIUS_IN_METER;
+            return Math.pow(Core.MAX_SCORE, goodness);
-    },
+        },
 
-    printDistanceForHuman: function (distance) {
+        calculateScoreBarProperties: function (score) {
-        if (distance < 1000) {
+            var percent = Math.round((score / Core.MAX_SCORE) * 100);
-            return Number.parseFloat(distance).toFixed(0) + ' m';
-        } else if (distance < 10000) {
-            return Number.parseFloat(distance / 1000).toFixed(2) + ' km';
-        } else if (distance < 100000) {
-            return Number.parseFloat(distance / 1000).toFixed(1) + ' km';
-        } else {
-            return Number.parseFloat(distance / 1000).toFixed(0) + ' km';
-        }
-    },
 
-    calculateScore: function (distance) {
+            var color;
-        var goodness = 1.0 - distance / Math.sqrt(mapArea);
+            if (percent >= 90) {
+                color = '#11ca00';
+            } else if (percent >= 10) {
+                color = '#ea9000';
+            } else {
+                color = '#ca1100';
+            }
 
-        return Math.pow(this.MAX_SCORE, goodness);
+            return { width: percent + '%', backgroundColor: color };
-    },
+        },
 
-    calculateScoreBarProperties: function (score) {
+        rewriteGoogleLink: function () {
-        var percent = Math.round((score / this.MAX_SCORE) * 100);
+            if (!Core.googleLink) {
-
+                var anchors = document.getElementById('panorama').getElementsByTagName('a');
-        var color;
+                for (var i = 0; i < anchors.length; i++) {
-        if (percent >= 90) {
+                    var a = anchors[i];
-            color = '#11ca00';
+                    if (a.href.indexOf('maps.google.com/maps') !== -1) {
-        } else if (percent >= 10) {
+                        Core.googleLink = a;
-            color = '#ea9000';
+                        break;
-        } else {
+                    }
-            color = '#ca1100';
-        }
-
-        return { width: percent + '%', backgroundColor: color };
-    }
-};
-
-var MapManipulator = {
-    rewriteGoogleLink: function () {
-        if (!googleLink) {
-            var anchors = document.getElementById('panorama').getElementsByTagName('a');
-            for (var i = 0; i < anchors.length; i++) {
-                var a = anchors[i];
-                if (a.href.indexOf('maps.google.com/maps') !== -1) {
-                    googleLink = a;
-                    break;
                 }
             }
+
+            setTimeout(function () {
+                Core.googleLink.title = 'Google Maps'
+                Core.googleLink.href = 'https://maps.google.com/maps'
+            }, 1);
         }
+    };
 
-        setTimeout(function () {
+    var Util = {
-            googleLink.title = 'Google Maps'
+        EARTH_RADIUS_IN_METER: 6371000,
-            googleLink.href = 'https://maps.google.com/maps'
-        }, 1);
-    }
-};
 
-var realPosition;
+        deg2rad: function (deg) {
-var panorama;
+            return deg * (Math.PI / 180.0);
-var guessMap;
+        },
-var guessMarker;
-var resultMap;
-var resultMarkers = { guess: null, real: null };
-var googleLink;
 
-function initialize() {
+        calculateDistance: function (position1, position2) {
-    guessMap = new google.maps.Map(document.getElementById('guessMap'), {
+            var lat1 = Util.deg2rad(position1.lat);
+            var lng1 = Util.deg2rad(position1.lng);
+            var lat2 = Util.deg2rad(position2.lat);
+            var lng2 = Util.deg2rad(position2.lng);
+
+            var angleCos = Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) +
+                Math.sin(lat1) * Math.sin(lat2);
+
+            if (angleCos > 1.0) {
+                angleCos = 1.0;
+            }
+
+            var angle = Math.acos(angleCos);
+
+            return angle * Util.EARTH_RADIUS_IN_METER;
+        },
+
+        printDistanceForHuman: function (distance) {
+            if (distance < 1000) {
+                return Number.parseFloat(distance).toFixed(0) + ' m';
+            } else if (distance < 10000) {
+                return Number.parseFloat(distance / 1000).toFixed(2) + ' km';
+            } else if (distance < 100000) {
+                return Number.parseFloat(distance / 1000).toFixed(1) + ' km';
+            } else {
+                return Number.parseFloat(distance / 1000).toFixed(0) + ' km';
+            }
+        }
+    };
+
+    Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
         disableDefaultUI: true,
         clickableIcons: false,
         draggableCursor: 'crosshair'
     });
 
-    guessMap.fitBounds(guessMapBounds);
+    Core.guessMap.fitBounds(guessMapBounds);
 
-    guessMap.addListener('click', function (e) {
+    Core.guessMap.addListener('click', function (e) {
-        if (guessMarker) {
+        if (Core.guessMarker) {
-            guessMarker.setPosition(e.latLng);
+            Core.guessMarker.setPosition(e.latLng);
             return;
         }
 
-        guessMarker = new google.maps.Marker({
+        Core.guessMarker = new google.maps.Marker({
-            map: guessMap,
+            map: Core.guessMap,
             position: e.latLng,
             clickable: false,
             draggable: true,
@@ -119,123 +144,98 @@ function initialize() {
         document.getElementById('guessButton').disabled = false;
     });
 
-    panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
+    Core.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
         disableDefaultUI: true,
         linksControl: true,
         showRoadLabels: false
     });
 
-    panorama.addListener('position_changed', function () {
+    Core.panorama.addListener('position_changed', function () {
-        MapManipulator.rewriteGoogleLink();
+        Core.rewriteGoogleLink();
     });
 
-    panorama.addListener('pov_changed', function () {
+    Core.panorama.addListener('pov_changed', function () {
-        MapManipulator.rewriteGoogleLink();
+        Core.rewriteGoogleLink();
     });
 
-    resultMap = new google.maps.Map(document.getElementById('resultMap'), {
+    Core.resultMap = new google.maps.Map(document.getElementById('resultMap'), {
         disableDefaultUI: true,
         clickableIcons: false,
     });
 
-    getNewPosition();
+    Core.getNewPosition();
-}
 
-function getNewPosition() {
+    document.getElementById('guessButton').onclick = function () {
-    var xhr = new XMLHttpRequest();
+        if (!Core.guessMarker) {
-    xhr.responseType = 'json';
+            return;
-    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.NEAREST }, loadPano);
         }
-    };
-    xhr.open('GET', 'getNewPosition.json', true);
-    xhr.send();
-}
 
-function loadPano(data, status) {
+        var guessedPosition = Core.guessMarker.getPosition();
-    if (status !== google.maps.StreetViewStatus.OK) {
+
-        getNewPosition();
+        this.disabled = true;
-        return;
+        Core.guessMarker.setMap(null);
+        Core.guessMarker = null;
+
+        var distance = Util.calculateDistance(Core.realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() });
+
+        document.getElementById('guess').style.visibility = 'hidden';
+        document.getElementById('result').style.visibility = 'visible';
+
+        var resultBounds = new google.maps.LatLngBounds();
+        resultBounds.extend(Core.realPosition);
+        resultBounds.extend(guessedPosition);
+
+        Core.resultMap.fitBounds(resultBounds);
+
+        Core.resultMarkers.real = new google.maps.Marker({
+            map: Core.resultMap,
+            position: Core.realPosition,
+            clickable: true,
+            draggable: false
+        });
+        Core.resultMarkers.guess = new google.maps.Marker({
+            map: Core.resultMap,
+            position: guessedPosition,
+            clickable: false,
+            draggable: false,
+            label: {
+                color: '#ffffff',
+                fontFamily: 'Roboto',
+                fontSize: '18px',
+                fontWeight: '500',
+                text: '?'
+            }
+        });
+
+        Core.resultMarkers.real.addListener('click', function () {
+            window.open('https://www.google.com/maps/search/?api=1&query=' + Core.realPosition.lat + ',' + Core.realPosition.lng, '_blank');
+        });
+
+        document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);
+
+        var score = Core.calculateScore(distance);
+        var scoreBarProperties = Core.calculateScoreBarProperties(score);
+
+        document.getElementById('score').innerHTML = Number.parseFloat(score).toFixed(0);
+
+        var scoreBar = document.getElementById('scoreBar');
+        scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
+        scoreBar.style.width = scoreBarProperties.width;
     }
 
-    panorama.setPov({heading: 0, pitch: 0, zoom: 1});
+    document.getElementById('continueButton').onclick = function () {
-    panorama.setPano(data.location.pano);
+        document.getElementById('scoreBar').style.width = '0';
-}
 
-document.getElementById('guessButton').onclick = function () {
+        Core.resultMarkers.real.setMap(null);
-    if (!guessMarker) {
+        Core.resultMarkers.real = null;
-        return;
+        Core.resultMarkers.guess.setMap(null);
+        Core.resultMarkers.guess = null;
+
+        document.getElementById('guess').style.visibility = 'visible';
+        document.getElementById('result').style.visibility = 'hidden';
+
+        Core.guessMap.fitBounds(guessMapBounds);
+
+        Core.getNewPosition();
     }
-
+})();
-    var guessedPosition = guessMarker.getPosition();
-
-    this.disabled = true;
-    guessMarker.setMap(null);
-    guessMarker = null;
-
-    var distance = Util.calculateDistance(realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() });
-
-    document.getElementById('guess').style.visibility = 'hidden';
-    document.getElementById('result').style.visibility = 'visible';
-
-    var resultBounds = new google.maps.LatLngBounds();
-    resultBounds.extend(realPosition);
-    resultBounds.extend(guessedPosition);
-
-    resultMap.fitBounds(resultBounds);
-
-    resultMarkers.real = new google.maps.Marker({
-        map: resultMap,
-        position: realPosition,
-        clickable: true,
-        draggable: false
-    });
-    resultMarkers.guess = new google.maps.Marker({
-        map: resultMap,
-        position: guessedPosition,
-        clickable: false,
-        draggable: false,
-        label: {
-            color: '#ffffff',
-            fontFamily: 'Roboto',
-            fontSize: '18px',
-            fontWeight: '500',
-            text: '?'
-        }
-    });
-
-    resultMarkers.real.addListener('click', function () {
-        window.open('https://www.google.com/maps/search/?api=1&query=' + realPosition.lat + ',' + realPosition.lng, '_blank');
-    });
-
-    document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);
-
-    var score = Util.calculateScore(distance);
-    var scoreBarProperties = Util.calculateScoreBarProperties(score);
-
-    document.getElementById('score').innerHTML = Number.parseFloat(score).toFixed(0);
-
-    var scoreBar = document.getElementById('scoreBar');
-    scoreBar.style.backgroundColor = scoreBarProperties.backgroundColor;
-    scoreBar.style.width = scoreBarProperties.width;
-}
-
-document.getElementById('continueButton').onclick = function () {
-    document.getElementById('scoreBar').style.width = '0';
-
-    resultMarkers.real.setMap(null);
-    resultMarkers.real = null;
-    resultMarkers.guess.setMap(null);
-    resultMarkers.guess = null;
-
-    document.getElementById('guess').style.visibility = 'visible';
-    document.getElementById('result').style.visibility = 'hidden';
-
-    guessMap.fitBounds(guessMapBounds);
-
-    getNewPosition();
-}

views/game.php

@@ -35,7 +35,7 @@
         var mapArea = <?= $bounds->calculateApproximateArea() ?>;
         var guessMapBounds = <?= $bounds->toJson() ?>;
     </script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script>
     <script src="static/js/mapguesser.js"></script>
-    <script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>&callback=initialize"></script>
 </body>
 </html>