Prototype 2

In this prototype, my goal is to understand what is API and to choose what kind of API for my capstone project. Before that, I haven’t exposed too much knowledge on this part and hopefully, this study could help me get an deep understand on API.

I spent most part of yesterday watching a few tutorials about the API, including Building an app from scratch and API for beginners. Technically, API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. And there is one more example I think it did much better job in explaining what is API in real life.

When someone sitting at a table in a restaurant with a menu of choices to order from. The kitchen is the part of the “system” that will prepare your order. What is missing is the critical link to communicate your order to the kitchen and deliver your food back to your table. That’s where the waiter or API comes in. The waiter is the messenger – or API – that takes your request or order and tells the kitchen – the system – what to do. Then the waiter delivers the response back to you; in this case, it is the food.

Since my project works really similar to Meetup, I took a look at their API. One of their feature is location-based requests, which I will use in my project as well. That is, When organizer create a event, while remaining private, still wish to show location about the event. By following this tutorial:

First, I created a new directory called geolocation.

Then I created a HTML file called index.html and a JavaScript file called script.js. Save both of these files in the geolocation directory.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GeoLocation</title>

  <style>
    html, body, #map {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>
</head>
<body>

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false http://script.js

This code sets up the main web page and I also have included two JavaScript files. The first loads a JavaScript library for the Google Maps API and the second loads the script.js file that you created earlier.

Now add the following code to the top of the file.

window.onload = function() {
}

I also need to check if the user’s browser supports geolocation. I can do this by looking for a geolocation object on the browsers navigator object. Browsers that do not support geolocation will not have a geolocation object.

// Check to see if the browser supports the GeoLocation API.
if (navigator.geolocation) {

} else {
  // Print out a message to the user.
  document.write('Your browser does not support GeoLocation');
}

In the else statement I have added a message that will be displayed to the user if the browser does not support geolocation.

// Get the location
navigator.geolocation.getCurrentPosition(function(position) {

};

The getCurrentPosition() function should itself contain a function. A Position object will be passed to this function, which can then be examined to retrieve the location data.

var lat = position.coords.latitude;
var lon = position.coords.longitude;

The last thing to do now is to add a call to the showMap() function, passing in the latand lon variables as parameters. Add this line below the code you added in step 5.

// Show the map
showMap(lat, lon);

Then I need to create a LatLng object for the Google Maps API. This object is used to position the map later. Add the following lines to the showMap() function.

// Create a LatLng object with the GPS coordinates.
var myLatLng = new google.maps.LatLng(lat, lon);

// Create the Map Options
var mapOptions = {
  zoom: 8,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Generate the Map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

Web demo

Overall, this was a great learning experience about geo-location API. I haven’t learned with these codes before so this was still a big challenge for me and I will keep exploring more in the rest of the semester.

Web demo

Share this: