diff --git a/manifest.json b/manifest.json
index 41c97a62..348c7939 100644
--- a/manifest.json
+++ b/manifest.json
@@ -18,7 +18,12 @@
         }
     },
 
-    "permissions": [
+    "sandbox": {
+    "pages": [
+      "tabs/map.html"]
+    },
+         
+        "permissions": [
         "https://www.google-analytics.com/",
         "https://*.github.com/",
         "https://*.githubusercontent.com/",
diff --git a/tabs/gps.css b/tabs/gps.css
index 06a29a2c..411ad57e 100644
--- a/tabs/gps.css
+++ b/tabs/gps.css
@@ -18,13 +18,24 @@
 
 .tab-gps a {
     font-weight: bold;
-    te
+}
+
+#map-canvas {
+    height: 100%;
+    background: #ccc;
+    width: 100%;
+    float: left;
 }
 
 #map {
-    display:none;
+    height: 100%;
+    width: 100%;
 }
 
+.tab-gps iframe {
+    height: 100%;
+    width: 100%;
+}
 
 
 progress[value]::-webkit-progress-bar {
diff --git a/tabs/gps.html b/tabs/gps.html
index 9b44b7df..b4335d2d 100644
--- a/tabs/gps.html
+++ b/tabs/gps.html
@@ -146,13 +146,15 @@
             </div>
         </div>
         <div class="cf_column half">
-            <div class="gui_box grey">
+            <div class="gui_box grey" style="height: 444px;">
                 <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:10px;" style="display:none;">
+                <div id="map" style="margin-top:0px; display:none;">
                     Online check success! Map can be loaded here!
+                      <iframe src="tabs/map.html"></iframe>
+
                 </div>
             </div>
 
diff --git a/tabs/map.html b/tabs/map.html
new file mode 100644
index 00000000..b98a87c3
--- /dev/null
+++ b/tabs/map.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Asynchronous Loading</title>
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+    <meta charset="utf-8">
+    <style>
+     html, body, #map-canvas {
+        height: 100%;
+        margin: 0px;
+        padding: 0px
+      }
+    </style>
+    <script>
+  function loadMapScript() {
+      var script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&callback=initialize';
+      document.head.appendChild(script);
+    }
+
+window.onload = loadMapScript;
+
+var map;
+function initialize() {
+  var mapOptions = {
+    zoom: 17,
+    streetViewControl: false,
+ // mapTypeId: google.maps.MapTypeId.SATELLITE,
+    center: {lat: 53.570645, lng: 10.001362}
+  };
+  map = new google.maps.Map(document.getElementById('map-canvas'),
+      mapOptions);
+
+  var marker = new google.maps.Marker({
+    // The below line is equivalent to writing:
+    // position: new google.maps.LatLng(-34.397, 150.644)
+    position: {lat: 53.570645, lng: 10.001362},
+    map: map
+  });
+
+  // You can use a LatLng literal in place of a google.maps.LatLng object when
+  // creating the Marker object. Once the Marker object is instantiated, its
+  // position will be available as a google.maps.LatLng object. In this case,
+  // we retrieve the marker's position using the
+  // google.maps.LatLng.getPosition() method.
+  var infowindow = new google.maps.InfoWindow({
+    content: '<p>Marker Location:' + marker.getPosition() + '</p>'
+  });
+
+  google.maps.event.addListener(marker, 'click', function() {
+    infowindow.open(map, marker);
+  });
+}
+  // 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
+
+    </script>
+  </head>
+  <body>
+    <div id="map-canvas"></div>
+  </body>
\ No newline at end of file
