MAPG-7 refactor JS to be more readable

load Google Maps API async

public/static/js/mapguesser.js

@@ -1,17 +1,92 @@
-Math.deg2rad = function (deg) {
+(function () {
-    return deg * (this.PI / 180.0);
+    var Core = {
+        MAX_SCORE: 1000,
+
+        realPosition: null,
+        panorama: null,
+        guessMap: null,
+        guessMarker: null,
+        resultMap: null,
+        resultMarkers: { guess: null, real: null },
+        googleLink: null,
+
+        getNewPosition: function () {
+            var xhr = new XMLHttpRequest();
+            xhr.responseType = 'json';
+            xhr.onreadystatechange = function () {
+                if (this.readyState == 4 && this.status == 200) {
+                    Core.realPosition = this.response.position;
+
+                    var sv = new google.maps.StreetViewService();
+                    sv.getPanorama({ location: this.response.position, preference: google.maps.StreetViewPreference.NEAREST }, Core.loadPano);
+                }
+            };
+            xhr.open('GET', 'getNewPosition.json', true);
+            xhr.send();
+        },
+
+        loadPano: function (data, status) {
+            if (status !== google.maps.StreetViewStatus.OK) {
+                Core.getNewPosition();
+                return;
+            }
+
+            Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 1 });
+            Core.panorama.setPano(data.location.pano);
+        },
+
+        calculateScore: function (distance) {
+            var goodness = 1.0 - distance / Math.sqrt(mapArea);
+
+            return Math.pow(Core.MAX_SCORE, goodness);
+        },
+
+        calculateScoreBarProperties: function (score) {
+            var percent = Math.round((score / Core.MAX_SCORE) * 100);
+
+            var color;
+            if (percent >= 90) {
+                color = '#11ca00';
+            } else if (percent >= 10) {
+                color = '#ea9000';
+            } else {
+                color = '#ca1100';
+            }
+
+            return { width: percent + '%', backgroundColor: color };
+        },
+
+        rewriteGoogleLink: function () {
+            if (!Core.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) {
+                        Core.googleLink = a;
+                        break;
+                    }
+                }
+            }
+
+            setTimeout(function () {
+                Core.googleLink.title = 'Google Maps'
+                Core.googleLink.href = 'https://maps.google.com/maps'
+            }, 1);
+        }
     };
 
     var Util = {
         EARTH_RADIUS_IN_METER: 6371000,
 
-    MAX_SCORE: 1000,
+        deg2rad: function (deg) {
+            return deg * (Math.PI / 180.0);
+        },
 
         calculateDistance: function (position1, position2) {
-        var lat1 = Math.deg2rad(position1.lat);
+            var lat1 = Util.deg2rad(position1.lat);
-        var lng1 = Math.deg2rad(position1.lng);
+            var lng1 = Util.deg2rad(position1.lng);
-        var lat2 = Math.deg2rad(position2.lat);
+            var lat2 = Util.deg2rad(position2.lat);
-        var lng2 = Math.deg2rad(position2.lng);
+            var lng2 = Util.deg2rad(position2.lng);
 
             var angleCos = Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) +
                 Math.sin(lat1) * Math.sin(lat2);
@@ -35,75 +110,25 @@ var Util = {
             } else {
                 return Number.parseFloat(distance / 1000).toFixed(0) + ' km';
             }
-    },
-
-    calculateScore: function (distance) {
-        var goodness = 1.0 - distance / Math.sqrt(mapArea);
-
-        return Math.pow(this.MAX_SCORE, goodness);
-    },
-
-    calculateScoreBarProperties: function (score) {
-        var percent = Math.round((score / this.MAX_SCORE) * 100);
-
-        var color;
-        if (percent >= 90) {
-            color = '#11ca00';
-        } else if (percent >= 10) {
-            color = '#ea9000';
-        } else {
-            color = '#ca1100';
-        }
-
-        return { width: percent + '%', backgroundColor: color };
         }
     };
 
-var MapManipulator = {
+    Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
-    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 () {
-            googleLink.title = 'Google Maps'
-            googleLink.href = 'https://maps.google.com/maps'
-        }, 1);
-    }
-};
-
-var realPosition;
-var panorama;
-var guessMap;
-var guessMarker;
-var resultMap;
-var resultMarkers = { guess: null, real: null };
-var googleLink;
-
-function initialize() {
-    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,83 +144,57 @@ 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() {
-    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.NEAREST }, loadPano);
-        }
-    };
-    xhr.open('GET', 'getNewPosition.json', true);
-    xhr.send();
-}
-
-function loadPano(data, status) {
-    if (status !== google.maps.StreetViewStatus.OK) {
-        getNewPosition();
-        return;
-    }
-
-    panorama.setPov({heading: 0, pitch: 0, zoom: 1});
-    panorama.setPano(data.location.pano);
-}
 
     document.getElementById('guessButton').onclick = function () {
-    if (!guessMarker) {
+        if (!Core.guessMarker) {
             return;
         }
 
-    var guessedPosition = guessMarker.getPosition();
+        var guessedPosition = Core.guessMarker.getPosition();
 
         this.disabled = true;
-    guessMarker.setMap(null);
+        Core.guessMarker.setMap(null);
-    guessMarker = null;
+        Core.guessMarker = null;
 
-    var distance = Util.calculateDistance(realPosition, { lat: guessedPosition.lat(), lng: guessedPosition.lng() });
+        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(realPosition);
+        resultBounds.extend(Core.realPosition);
         resultBounds.extend(guessedPosition);
 
-    resultMap.fitBounds(resultBounds);
+        Core.resultMap.fitBounds(resultBounds);
 
-    resultMarkers.real = new google.maps.Marker({
+        Core.resultMarkers.real = new google.maps.Marker({
-        map: resultMap,
+            map: Core.resultMap,
-        position: realPosition,
+            position: Core.realPosition,
             clickable: true,
             draggable: false
         });
-    resultMarkers.guess = new google.maps.Marker({
+        Core.resultMarkers.guess = new google.maps.Marker({
-        map: resultMap,
+            map: Core.resultMap,
             position: guessedPosition,
             clickable: false,
             draggable: false,
@@ -208,14 +207,14 @@ document.getElementById('guessButton').onclick = function () {
             }
         });
 
-    resultMarkers.real.addListener('click', function () {
+        Core.resultMarkers.real.addListener('click', function () {
-        window.open('https://www.google.com/maps/search/?api=1&query=' + realPosition.lat + ',' + realPosition.lng, '_blank');
+            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 = Util.calculateScore(distance);
+        var score = Core.calculateScore(distance);
-    var scoreBarProperties = Util.calculateScoreBarProperties(score);
+        var scoreBarProperties = Core.calculateScoreBarProperties(score);
 
         document.getElementById('score').innerHTML = Number.parseFloat(score).toFixed(0);
 
@@ -227,15 +226,16 @@ document.getElementById('guessButton').onclick = function () {
     document.getElementById('continueButton').onclick = function () {
         document.getElementById('scoreBar').style.width = '0';
 
-    resultMarkers.real.setMap(null);
+        Core.resultMarkers.real.setMap(null);
-    resultMarkers.real = null;
+        Core.resultMarkers.real = null;
-    resultMarkers.guess.setMap(null);
+        Core.resultMarkers.guess.setMap(null);
-    resultMarkers.guess = null;
+        Core.resultMarkers.guess = null;
 
         document.getElementById('guess').style.visibility = 'visible';
         document.getElementById('result').style.visibility = 'hidden';
 
-    guessMap.fitBounds(guessMapBounds);
+        Core.guessMap.fitBounds(guessMapBounds);
 
-    getNewPosition();
+        Core.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>