GOOGLE MAP

Document

https://developers.google.com/maps/documentation/javascript/tutorial

Authentication

Get an API key from Google API Console.

               1. API Key

               2. Client ID

Usage limits

Localize Map

From loaded GMap API Link:

•      Language localization, &language=en

•      Region localization, &region=GB

Map Types

4 basic map types: 
ROADMAP, SATELLITE, HYBRID and TERRAIN

Customize map type: 

Nissan Euro UEFA Champion League

Map Controls

Zoom, MapType, Street View, Rotate, Scale, Fullscreen

Default Map Controls  UI

Disable default Map Controls  UI

Adding control to Map

Custom controls

Marker

Add/remove marker

Animated marker

Custom marker

Drag marker

Info window

Add info window

Open info window

Close info window

Move info window

Shapes

Polyline

Polygon

Rectangle

Circle

Interact with shapes: edit, drag, add events...

Overlays

Using ground overlays

Custom overlay

Data layers

1. Draw polygon
2. Load GeoJSON
3. Style GeoJSON Data
4. Add event handlers: mouse events, map events...

Directions

• Directions requests/ Directions result object
• Render directions
• Using waypoint in Routes
• Drag directions

Distance

• Distance requests/ Distance response
• Parsing the result

Geocoding

• Geocoding requests/ Geocoding response
• Reverse geocoding: by location, by place...

Street view

Street view

Street view location and point of view

Adding overlays

Listen street view events

Street view controls

Custom street view

Static map & image

FACEBOOK

Create FB app

App domains

Roles

App review

Setup

FB login

Notes

Permission: email, user_likes

Access token: user, page, app, client..

FB.api()

FB.ui()

Frameworks

jQuery

AngulaJS

RequireJS

and more...

https://developers.facebook.com/docs/javascript/reference/v2.6

YOUTUBE

IFrame Player  API

Step 0: Create player container

Step 1: Load iframe Play API

https://www.youtube.com/iframe_api

Step 2: Create api ready function

function onYouTubeIframeAPIReady() {        

}

IFrame Player  API

Step 3: Handle player ready event

Step 4: Call methods

• loadVideoById()
• Video controls
• Playback status
• Playback quality
• Video information
• Playlist information
• Event listener

Mobile considerations

Data  API

Get auth credentical

https://console.developers.google.com/apis/credentials?project=_

Data  API

Server-side web app

Client-side web app

Data  API

Authorizing request

//Load goole client api
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>


//authorize
function googleApiClientReady() {
  gapi.auth.authorize({
    client_id: OAUTH2_CLIENT_ID,
    scope: OAUTH2_SCOPES,
    immediate: true
  }, handleAuthResult);
}

//load youtube data api
function handleAuthResult() {
    gapi.client.load('youtube', 'v3', function() {
        handleAPILoaded();
    });
}

Data  API

Search by keyword

//create search request + query parameter
var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet'
});


//handle response
request.execute(function(response) {
    //TODO
    var result = JSON.stringify(response.result);
    
});

Data  API

Playlist

//create playlist list request
var request = gapi.client.youtube.playlists.list({
    part: 'snippet,status',
    id: ''
  });

//handle response
request.execute(function(response) {
    //TODO
    var result = JSON.stringify(response.result);
    
});

Methods: list, insert, update, delete...

Data  API

Video

Comment

Channel

Captions

Subscriptions

Thumbnails

Favorite

Rating

Live streams

Data  API

... and more

Data  API

Using APIs Explorer

https://developers.google.com/apis-explorer/#p/youtube/v3/

TWITTER

TWITTER

Support JS

INTAGRAM

INTAGRAM