Added zoom function for GPS map

4 files changed, 86 insertions, 38 deletions

diff --git a/manifest.json b/manifest.json
index 5f6d24ea..6eff7b39 100644
--- a/manifest.json
+++ b/manifest.json
@@ -19,8 +19,7 @@
     },
 
     "sandbox": {
-    "pages": [
-      "tabs/map.html"]
+    "pages": ["tabs/map.html"]
     },
          
         "permissions": [
diff --git a/tabs/gps.html b/tabs/gps.html
index cb3d456e..00bc2840 100644
--- a/tabs/gps.html
+++ b/tabs/gps.html
@@ -159,8 +159,11 @@
                 </div>
             </div>
                 <div id="loadmap">
-                    <iframe src="tabs/map.html"></iframe>
-                    <div class="controls"><a href="#" id="">+</a><a href="#" id="">–</a></div>
+                    <iframe src="tabs/map.html" id="map"></iframe>
+                    <div class="controls">
+                          <a href="#" id="zoom_in">+</a>
+                          <a href="#" id="zoom_out">–</a>
+                    </div>
                 </div>
         </div>
 
diff --git a/tabs/gps.js b/tabs/gps.js
index b5c28843..f26c16b8 100644
--- a/tabs/gps.js
+++ b/tabs/gps.js
@@ -14,9 +14,9 @@ TABS.gps.initialize = function (callback) {
     }
 
     MSP.send_message(MSP_codes.MSP_STATUS, false, false, load_html);
-
+    
     function process_html() {
-        // translate to user-selected language
+        // translate to user-selected languageconsole.log('Online');
         localize();
 
         function get_raw_gps_data() {
@@ -72,37 +72,53 @@ TABS.gps.initialize = function (callback) {
         }, 250, true);
 
 
-//check for internet connection on load
-if (navigator.onLine) {
-  console.log('Online');
-  $('#connect').hide();
-  $('#waiting').show();
-  $('#loadmap').show();
-
-} else {
-  console.log('Offline');
-  $('#connect').show();
-  $('#waiting').hide();
-  $('#loadmap').hide();
-
-}
-
-$("#check").on('click',function(){
-if (navigator.onLine) {
-  console.log('Online');
-  $('#connect').hide();
-  $('#waiting').show();
-  $('#loadmap').show();
-
-} else {
-  console.log('Offline');
-  $('#connect').show();
-  $('#waiting').hide();
-  $('#loadmap').hide();
-
-  }
- });
- 
+        //check for internet connection on load
+        if (navigator.onLine) {
+            console.log('Online');
+            $('#connect').hide();
+            $('#waiting').show();
+            $('#loadmap').show();
+
+        } else {
+            console.log('Offline');
+            $('#connect').show();
+            $('#waiting').hide();
+            $('#loadmap').hide();
+
+        }
+
+        $("#check").on('click',function(){
+            if (navigator.onLine) {
+                console.log('Online');
+                $('#connect').hide();
+                $('#waiting').show();
+                $('#loadmap').show();
+
+            } else {
+                console.log('Offline');
+                $('#connect').show();
+                $('#waiting').hide();
+                $('#loadmap').hide();
+            }
+        });
+
+        var frame = document.getElementById('map');
+
+        $('#zoom_in').click(function() {
+            console.log('zoom in');
+            var message = {
+		action: 'zoom_in',
+	    };
+	    frame.contentWindow.postMessage(message, '*');
+        });
+        
+        $('#zoom_out').click(function() {
+            console.log('zoom out');
+	    var message = {
+		action: 'zoom_out'
+	    };
+	    frame.contentWindow.postMessage(message, '*');
+        });
  
         GUI.content_ready(callback);
     }
diff --git a/tabs/map.html b/tabs/map.html
index 86959d39..5597dd90 100644
--- a/tabs/map.html
+++ b/tabs/map.html
@@ -12,6 +12,29 @@
       }
     </style>
     <script>
+
+     window.addEventListener('message', function (e) {
+       var mainWindow = e.source;
+       var result = '';
+       try {
+         switch(e.data.action){
+            case 'zoom_in':
+              var zoom = map.getZoom();
+              zoom++;
+              map.setZoom(zoom);
+              break;
+              
+            case 'zoom_out':
+              var zoom = map.getZoom();
+              zoom--;
+              map.setZoom(zoom);
+              break;
+         }
+       } catch (e) {
+         console.log('message error');
+       }
+     });
+     
   function loadMapScript() {
       var script = document.createElement('script');
       script.type = 'text/javascript';
@@ -23,9 +46,10 @@ window.onload = loadMapScript;
 
 var map;
 function initialize() {
+
   var mapOptions = {
     zoom: 17,
-    zoomControl: true,
+    zoomControl: false,
     streetViewControl: false,
  // mapTypeId: google.maps.MapTypeId.SATELLITE,
     center: {lat: 53.570645, lng: 10.001362}
@@ -57,6 +81,12 @@ var marker = new google.maps.Marker({
   google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map, marker);
   });
+  
+  window.addEventListener('message', function(e) {
+
+    var data = e.data;
+    var origin = e.origin;
+});
 }
   // sandbox docs1: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/sandbox
   // sandbox docs1: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/sandboxed-content