Mike Heavers

04/15/2014

Google has an API called Picker, which allows you to easily load a popup window that will allow you to search through a massive amount of Google content - from your own docs, photos, and videos, to online image and youtube searches. This is a great way to get stuff from Google and allow users to put it on the screen. The hello world from their documentation is good, but it's missing a few steps that I thought I'd clarify in this blog post.

Setting up the API

There's a little bit of setup you have to do first before you can load the picker. First you need to set up a project in the Google Developer's Console.. Give your project a name, and a simple id that has no spaces or special characters. Next click on the name of the project to go into the project details page.

On the left side, you'll see an options menu. Click the APIs button and on the right you'll a list of all the APIs that are enabled for this project. You'll want to make sure, at the very least, that the Picker API is enabled by clicking "ON" (as well as any other APIs you want to interact with).

Next choose Credentials from the menu on the left. This is the part that can get a bit confusing. The picker API requires OAuth authentication to access a user's private content, so you'll need to enable it by clicking Create New Client ID. The ID you want to create is a web application, so select that from the popup. Beneath that you should see a textarea for "Allowed Javascript Origins." These are the web addresses where your site will live that have access to your application. For me, I always develop locally using MAMP, so I have an origin of something like http://localhost:8888/ or I set up a vhost (recommended) wherein I'll have an address like http://picker.local:8888. So, under javascript origins, I'd put exactly that address, as well as the web address where the site will eventually end up when it's online for everyone to see (if you know it).

Next you'll ned to set the application up so that others can access it, so you'll need to click Create a New Key under Public API Access. The type of key you want here is a "Browser Key". Click it, and google will generate your key.

The last thing you might want to do is click "Consent Screen" from the menu at the left, and fill out the form with a little data about your application. You'll need this when you allow users to pick their Google Content for the first time, as it will prompt them to log in, and tell them that "[_BLANK] application is attempting to use their personal info.

Once this is done, keep this screen handy - we'll need it when we implement the picker API.

Implementing the API

Now you're ready to write some code. You can copy Google's hello world example almost verbatim into your page. Then we just need to change a few of the settings.

 var developerKey = 'ABC123 ... ';

var clientId = '123 ... .apps.googleusercontent.com';

View it in your web browser and, as long as you're accessing the page from one of the approved javascript origins we set up earlier, you should see a popup (or, perhaps, a popup blocker warning which you'll need to allow), that will ask you to log in to your google account. Once you've done so, it will load the photo picker. Assuming you have some photos in google+, you'll see them, arranged by album, and you'll be allowed to select one. Once you do, a prompt will appear on screen telling you which photo you selected!

This is all well and good, but how do you display the actual photo? What I did is to change a bit of the code as follows. In the picker callback function, around line 62, change the following:

  // A simple callback implementation.
  function pickerCallback(data) {
    var url = 'nothing';
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
      var doc = data[google.picker.Response.DOCUMENTS][0];
      url = doc[google.picker.Document.URL];
    }
    var message = 'You picked: ' + url;
    document.getElementById('result').innerHTML = message;
  }

to:

// A simple callback implementation.
  function pickerCallback(data) {
    var url = 'nothing';
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
      var doc = data[google.picker.Response.DOCUMENTS][0];
      var thumbs = data.docs[0].thumbnails;
      var imageURL = thumbs[thumbs.length - 1].url; //select the largest image returned
      var image = new Image();
      image.src = imageURL;
      document.getElementById('result').innerHTML = image;
    }

  }

That's it! This time, if you refresh and pick an image, it should create an image tag with the source of the largest thumbnail from your chosen google photo, and append it to the result div on the page.

I'll be posting a follow up tutorial that shows you how to allow your users to create an online photo collage using the Google Picker API and the Canvas library Fabric.js. Stay tuned.