Introduction to APIs

API = Application Programming Interface

Have you ever wondered how Facebook is able to automatically display your Instagram photos?

As a programmer, you don't want to install a database of the all world’s addresses and algorithms in order to search them on your server. (hint: just use Google's API)

Companies use APIs to boost traffic and business

• In 2013, there were over 10,000 APIs published by companies for open consumption.
• You can learn about many different companies and their APIs here

What is a (web) API?

• An API is a service that lets one website use data or functionality from another website
• APIs do all this by “exposing” some of a program’s internal functions to the outside world.
• They make it possible to share data and take actions without requiring developers to share all of their software’s code.
• Most modern webpages rely on at least one API - like the Facebook API for social interaction.

We use APIs to enhance our sites.

Here's How:

• 1. Functionality: We use APIs to outsource part of our application’s functionality to someone else, so we can focus on the unique bits.

2. Public Data: There is a huge amount of data available, and APIs make that data available to use in a structured way.

3. User Data: We also use APIs to access data from other products and integrate them with our own. Users use multiple products and expect for them to work together - synergy.

The Diagram

APIs are so useful! We need to understand HOW to best use APIs, WHAT APIs are out there, and WHY you should use them.

How do Client-side APIs work?

How do Client-side APIs work?

• An API is used to bring in information from another server, and there's only so many ways that you can do that in the client.
• The API itself isn’t really a box floating in space, so much as a chunk of code that acts as a gatekeeper.
• That code helps translate the third party’s data into something you can read, and it makes sure that only authorized users can access the data (a process called “authentication”).

Let's use the Google Maps API!

Using the Google Map API

1. Load the Google API

The Google Maps API is a JavaScript library. It can be added to a web page with a script tag:

Google Maps API

2.Set Map Properties

Create a function to initialize the map:

function initialize() {
}
            

In the initialize function, create an object (mapProp) to define the properties for the map:

var mapProp = {
  center:new google.maps.LatLng(51.508742, -0.120850),
  zoom: 7,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
            

How the code works:

• The center property specifies where to center the map.
• The LatLng object centers the map on a specific point. Pass the coordinates in the order: latitude, longitude.
• The zoom property specifies the zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out.
• The mapTypeId property specifies the map type to display. The following map types are supported:
  • ROADMAP (normal, default 2D map)
  • SATELLITE (photographic map)
  • HYBRID (photographic map + roads and city names)
  • TERRAIN (map with mountains, rivers, etc.)

Google Maps API

3. Create a Map Container

Create a div element to hold the map. Use CSS to size the element:

Google Maps API

4. Create a Map Object

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
            

The code above creates a new map inside the div element with id="googleMap", using the parameters that are passed (mapProp).

Google Maps API

5. Add an Event Listener to Load the Map

Add a DOM listener that will execute the initialize() function on window load (when the page is loaded):

google.maps.event.addDomListener(window, 'load', initialize);
            

Challenge

Go to Snazzy Maps and find a map style that you like and copy it.

var map = new google.maps.Map(document.getElementById('googleMap'), {
    center: // Add your location here
    zoom: //Add your zoom here
    styles: //Add your array here
});
            

Make your new map!

Codecademy

Learn How To Use Youtube's API

Click here

Courses in Pluralsight

Build your own API

Use Google Maps API

THE END

Thank you for your attention!