startup-systems · mw866 · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016
diff --git a/vendor/.keep → Icon b/vendor/.keep → Icon
diff --git a/README.md b/README.md
@@ -1,55 +1,12 @@
-# Mashup project
+# Google Map - Whois Mashup
 
-This project is open-ended!
+## Description
+A mashup project that shows the the geolocation on Google Map based on visitor's WHOIS record.
+It mashes up the outputs from two APIs:
+1. GPS coordinates in your IPWHOIS record (API by ip-api.com/)
+2. Visualize the GPS coordinates in a Google Map (API by maps.googleapis.com)
 
-* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax)
-* [inspiration?](http://www.programmableweb.com/mashups)
+## Notes
+(For Chrome) Please click on "Load the unsafe scripts butter" if see the warning "This page is trying to load scripts from unauthenticated sources."
 
-## Requirements
-
-* Build a site that uses data from at least one external API in an interesting, interactive way. (**80%**)
-* HTML validation (using the [Nu HTML Checker](https://validator.w3.org/nu/)) must pass. (**10%**)
-* JavaScript linting (using the configured [JSHint](http://jshint.com/about/)) must pass. (**10%**)
-* Replace this README with a description of the project.
-
-### Extra credit
-
-Too easy?
-
-* Build in an [object-oriented](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript) way (**10%**)
-* Add fancy interactivity/animations (**10%**)
-
-If you do either of these, please let Aidan know so he can take a look.
-
-## Tips
-
-* The JS code should be **non-trivial**. That being said... start simple! (Just get the data to show up on the page.)
-* No server-side coding is required, but feel free to create a backend in whatever language if you like, if you need one.
-* You are welcome to use any 3rd-party libraries/frameworks – just load them from a CDN (e.g. [cdnjs](http://cdnjs.com)), or put them under the [`vendor/`](vendor/) folder.
-* **Do not commit the `client_secret` (or anything else from an API that says "token" or "secret")**, as a hacker could use this to make requests on behalf of you.
-
-## Finding an API
-
-A couple things to look for in an API (or at least the endpoints you're using) for this project:
-
-* Make sure it doesn't require authentication/authorization (e.g. [OAuth](http://oauth.net/)) - at least for the endpoints that you want to use - so that you don't need a server.
-* If the API doesn't support cross-domain requests (JSONP or CORS), you will need to use [JSONProxy](https://jsonp.afeld.me/).
-
-Here is a [list of API suggestions](https://gist.github.com/afeld/4952991).
-
-## Running tests locally
-
-Within this repository directory in your [virtual machine](https://github.com/startup-systems/vm):
-
-1. [Install Node.js 6.x.](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions)
-1. Install the project dependencies.
-
-    ```bash
-    npm install
-    ```
-
-1. Run the tests.
-
-    ```bash
-    npm test -s
-    ```
+It is just schoolwork. I do not track your location. Feel free to inspect my source code.
diff --git a/index.html b/index.html
@@ -1,8 +1,62 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Mashup</title>
+    <title>Mashup: IP+Location</title>
+    <meta name="viewport" content="initial-scale=1.0">
+    <meta charset="utf-8">
+    <style>
+      html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+      #map {
+        height: 50%;
+      }
+    </style>
   </head>
   <body>
+    <h1>A Javascript Mashup: IP + Location</h1>
+    <p>This is your approximate location based on your IP address.</p>
+    <div id="map"></div>
+    <p>This is your approximate WHOIS record based on your IP address.</p>
+    <table id="whois"></table>
+
+    <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
+
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGjuVkx0ICgkjnNAnHkZb6Gr1evz6FJqE&callback=main"
+    async defer></script>
+
+    <!-- <script src='js/main.js'></script> -->
+    <script type='text/javascript'>
+    ///Google Map API:
+
+    function initMap(ipLng, ipLat){
+      var map;
+      map = new google.maps.Map(document.getElementById('map'), {
+        center: {lat: ipLat, lng: ipLng},
+        zoom: 8
+      });
+      var marker = new google.maps.Marker({
+              position: {lat: ipLat, lng: ipLng},
+              map: map
+            });
+    }
+    //WHOIS API:
+
+    function main(){
+      var ipLng;
+      var ipLat;
+      $.getJSON("http://ip-api.com/json/?callback=?", function(data) {
+          var table_body = "";
+          $.each(data, function(k, v) {
+             table_body += "<tr><td>" + k + "</td><td><b>" + v + "</b></td></tr>";
+          });
+          $("#whois").html(table_body);
+          initMap(data.lon, data.lat);
+          console.log(data.lon, data.lat);
+        });
+    }
+    </script>
   </body>
 </html>
diff --git a/js/Icon b/js/Icon
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,55 @@
+///Google Map API:
+
+function initMap(ipLng, ipLat){
+  var map;
+  map = new google.maps.Map(document.getElementById('map'), {
+    center: {lat: ipLat, lng: ipLng},
+    zoom: 8
+  });
+  var marker = new google.maps.Marker({
+          position: {lat: ipLat, lng: ipLng},
+          map: map
+        });
+}
+//WHOIS API:
+
+function main(){
+  var ipLng;
+  var ipLat;
+  $.getJSON("http://ip-api.com/json/?callback=?", function(data) {
+      var table_body = "";
+      $.each(data, function(k, v) {
+         table_body += "<tr><td>" + k + "</td><td><b>" + v + "</b></td></tr>";
+      });
+      $("#whois").html(table_body);
+      initMap(data.lon, data.lat);
+      console.log(data.lon, data.lat);
+    });
+
+
+/*    $.ajax({
+      url: "http://ip-api.com/json/?callback=?",
+      type: "GET",
+      dataType : "json",
+    })
+
+  .done(function(data) {
+    var table_body = "";
+    $.each(data, function(k, v) {
+    table_body += "<tr><td>" + k + "</td><td><b>" + v + "</b></td></tr>";
+    });
+    $("#whois").html(table_body);
+    initMap(data.lon, data.lat);
+    console.log(data.lon, data.lat);
+  })
+
+  .fail(function( ) {
+    alert( "Error" );
+
+  })
+
+  .always(function( xhr, status ) {
+    alert( "The request is complete!" );
+  });
+*/
+}
diff --git a/testAjax.js b/testAjax.js