Added zoom function for GPS map

manifest.json

@@ -19,8 +19,7 @@
     },
 
     "sandbox": {
-    "pages": [
-      "tabs/map.html"]
+    "pages": ["tabs/map.html"]
     },
          
         "permissions": [

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>
 

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();
+        //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();
+        } 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();
+        $("#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();
+            } 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);
     }

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