Some further work on the map in GPS Tab

images/icons/cf_icon_position.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-234 389.3 70.2 78.7" style="enable-background:new -234 389.3 70.2 78.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{filter:url(#Adobe_OpacityMaskFilter);}
+	.st1{filter:url(#Adobe_OpacityMaskFilter_1_);}
+	.st2{mask:url(#SVGID_1_);}
+	.st3{fill:url(#SVGID_2_);}
+	.st4{opacity:0.1;}
+	.st5{fill:#59AA29;}
+</style>
+<defs>
+	<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-219" y="448.6" width="39.5" height="16.5">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="-219" y="448.6" width="39.5" height="16.5" id="SVGID_1_">
+	<g class="st0">
+		<defs>
+			<filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="-219" y="448.6" width="39.5" height="16.5">
+				<feFlood  style="flood-color:white;flood-opacity:1" result="back"/>
+				<feBlend  in="SourceGraphic" in2="back" mode="normal"/>
+			</filter>
+		</defs>
+		<mask maskUnits="userSpaceOnUse" x="-219" y="448.6" width="39.5" height="16.5" id="SVGID_1_">
+			<g class="st1">
+			</g>
+		</mask>
+		<g class="st2">
+			<g>
+				<g>
+					<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-199.2341" y1="469.05" x2="-199.2341" y2="451.05">
+						<stop  offset="0" style="stop-color:#FFFFFF"/>
+						<stop  offset="1" style="stop-color:#000000"/>
+					</linearGradient>
+					<path class="st3" d="M-199.2,448.6c-10.9,0-19.7,2.6-19.7,5.8c0,0.2,0.1,0.5,0.2,0.7c1.7,4.5,18.3,9.7,18.3,9.7
+						c0.3,0.1,0.6,0.2,0.9,0.2l0,0l0.5,0l0.5,0l0,0c0.3,0,0.6-0.1,0.9-0.2c0,0,16.4-5.2,18-9.7c0.1-0.2,0.2-0.5,0.2-0.7
+						C-179.5,451.2-188.4,448.6-199.2,448.6z"/>
+				</g>
+			</g>
+		</g>
+	</g>
+</mask>
+<g class="st4">
+	<g>
+		<g>
+			<path d="M-199.2,448.6c-10.9,0-19.7,2.6-19.7,5.8c0,0.2,0.1,0.5,0.2,0.7c1.7,4.5,18.3,9.7,18.3,9.7c0.3,0.1,0.6,0.2,0.9,0.2l0,0
+				l0.5,0l0.5,0l0,0c0.3,0,0.6-0.1,0.9-0.2c0,0,16.4-5.2,18-9.7c0.1-0.2,0.2-0.5,0.2-0.7C-179.5,451.2-188.4,448.6-199.2,448.6z"/>
+		</g>
+	</g>
+</g>
+<g>
+	<g>
+		<g>
+			<path class="st5" d="M-199.2,395c-13.6,0-24.6,11-24.6,24.6c0,1,0.1,2.1,0.2,3c2.1,19.2,22.8,41.4,22.8,41.4
+				c0.4,0.4,0.7,0.7,1.1,0.9l0,0l0.7,0.2l0.7-0.2l0,0c0.4-0.2,0.7-0.5,1.1-0.9c0,0,20.4-22.2,22.5-41.4c0.1-1,0.2-2,0.2-3
+				C-174.7,406.1-185.7,395-199.2,395z"/>
+		</g>
+	</g>
+</g>
+</svg>

tabs/gps.html

@@ -160,7 +160,7 @@
             </div>
                 <div id="loadmap">
                     <iframe src="tabs/map.html"></iframe>
-                    <div class="controls"><a href="#" id="">+</a><a href="#" id="">-</a></div>
+                    <div class="controls"><a href="#" id="">+</a><a href="#" id="">–</a></div>
                 </div>
         </div>
 

tabs/map.html

@@ -33,12 +33,17 @@ function initialize() {
   map = new google.maps.Map(document.getElementById('map-canvas'),
       mapOptions);
 
-  var marker = new google.maps.Marker({
+var marker = new google.maps.Marker({
-    // The below line is equivalent to writing:
+    icon : '../images/icons/cf_icon_position.png',
-    // position: new google.maps.LatLng(-34.397, 150.644)
+    position: new google.maps.LatLng(53.570645, 10.001362),
-    position: {lat: 53.570645, lng: 10.001362},
+    size: new google.maps.Size(10, 10),
-    map: map
+    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
@@ -46,7 +51,7 @@ function initialize() {
   // 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>'
+    content: '<p>Your Location: ' + marker.getPosition() + '</p>'
   });
 
   google.maps.event.addListener(marker, 'click', function() {
@@ -56,6 +61,7 @@ function initialize() {
   // 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>