further work on map functionality

manifest.json

@@ -25,6 +25,7 @@
          
         "permissions": [
         "https://www.google-analytics.com/",
+        "https://maps.googleapis.com/*",    
         "https://*.github.com/",
         "https://*.githubusercontent.com/",
         "http://*.baseflight.net/",

tabs/gps.css

@@ -27,8 +27,7 @@
     float: left;
 }
 
-.tab-gps #map {
-    height: 100%;
+.tab-gps #waiting {
     width: 100%;
 }
 
@@ -37,6 +36,11 @@
     width: 100%;
 }
 
+.tab-gps #loadmap {
+    height: 100%;
+    width: 100%;
+}
+
 
 progress[value]::-webkit-progress-bar {
     background-color: #d2d2d2;

tabs/gps.html

@@ -147,14 +147,18 @@
         </div>
         <div class="cf_column half">
             <div class="gui_box grey" style="height: 444px;">
+                <div class="gui_box_titlebar">
+                        <div class="spacer_box_title" i18n="gpsHead"></div>
+                </div>
                 <div id="connect" style="display:none; text-align:center;">
                     please check your internet connection
                     <div class="default_btn" style="width:50px; margin-left:auto; margin-right:auto; float:none;"><a id="check">retry</a></div>
                 </div>
-                <div id="map" style="margin-top:0px; display:none;">
-                    Online check success! Map can be loaded here!
-                      <iframe src="tabs/map.html"></iframe>
-
+                <div id="waiting" style="margin-top:0px; display:none;">
+                    Online check success! Waiting for GPS 3D fix…
+                </div>
+                <div id="loadmap" style="margin-top:0px; display:none;">
+                    <iframe src="tabs/map.html"></iframe>
                 </div>
             </div>
 

tabs/gps.js

@@ -76,23 +76,30 @@ TABS.gps.initialize = function (callback) {
 if (navigator.onLine) {
   console.log('Online');
   $('#connect').hide();
-  $('#map').show();
+  $('#waiting').show();
+  $('#loadmap').show();
+
 } else {
   console.log('Offline');
   $('#connect').show();
-  $('#map').hide();
+  $('#waiting').hide();
+  $('#loadmap').hide();
+
 }
 
 $("#check").on('click',function(){
 if (navigator.onLine) {
   console.log('Online');
   $('#connect').hide();
-  $('#map').show();
+  $('#waiting').show();
+  $('#loadmap').show();
 
 } else {
   console.log('Offline');
   $('#connect').show();
-  $('#map').hide();
+  $('#waiting').hide();
+  $('#loadmap').hide();
+
   }
  });