stalking

css/main.scss

@@ -2,6 +2,7 @@
 ---
 
 @import "responsive.css";
+@import "map.css";
 
 $ponytones-blue: rgb(157, 218, 247);
 $ponytones-purple: rgb(166, 107, 191);

css/map.css

@@ -0,0 +1,4 @@
+.map{
+  height: 300px;
+  width: 100%;
+}

index.html

@@ -366,8 +366,14 @@ <h3 class="no-margin">
       </span>
     </div>
   </footer>
+
+  <div class="map"></div>
+
   <script src="https://checkout.stripe.com/checkout.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXparlV9wTQNSmHi-rEq6Cu1nxHR-hTf8"></script>
   <script src="https://me.tjhorner.com/jsonp"></script>
+
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

js/main.js

@@ -114,4 +114,40 @@ load = function(data){
 
     $("#ram-usage").text(data.hardware.results["RAM usage"]);
   }
+
+  if(data.phone.updatedAt){
+    var loc = { lat: data.phone.latitude, lng: data.phone.longitude };
+
+    var map = new google.maps.Map($(".map")[0], {
+      zoom: 16,
+      draggable: false,
+      rotateControl: false,
+      scaleControl: false,
+      zoomControl: false,
+      streetViewControl: false,
+      scrollwheel: false,
+      keyboardShortcuts: false,
+      mapTypeControl: false,
+      center: loc
+    });
+
+    var marker = new google.maps.Marker({
+      position: loc,
+      icon: "/img/tj-transparent.png",
+      title: "This is where I am!",
+      map: map
+    });
+
+    var iwText = "<b>This is where I am!</b> My phone is at " + data.phone.battery + "% and it is " + (data.phone.charging ? "charging" : "not charging") + ". This location was last updated " + moment(data.phone.updatedAt).fromNow() + ".";
+
+    var iw = new google.maps.InfoWindow({
+      content: iwText
+    });
+
+    marker.addListener("click", function() {
+      iw.open(map, marker);
+    });
+
+    iw.open(map, marker);
+  }
 }