I’ll make it a relatively short one, so here goes.

I’ve been doing some work on a publishers website, so of course they want to use the Google Book Preview on their product pages.

Google have designed their API to be as easy to use as possible, they even let you run a wizard on its page.

This is all well and good if you just want to plonk their graphic link to a scanned book on your page somewhere, with it not showing if the book not available.

But what if you want to use your own graphical link? And you don’t want the link visible if the book not available? This link might even form part of a navigation control….

So, after reading the documentation, I realised I would have to write my own Javascript method to show/hide the link.

The first function, displayGoogle, is called from the page initialise and builds up a JSON script, with the books isbn, appends and therefore executes it

function displayGoogle(isbn){
var script = document.createElement("script");
script.setAttribute("id", "jsonScript");
script.setAttribute("src",    "http://books.google.com/books?bibkeys=" + escape(isbn)     +  "&jscmd=viewapi&callback=bookExists");
script.setAttribute("type", "text/javascript");
document.documentElement.firstChild.appendChild(script);
}

The key command to note here is the callback value, bookExists. This is the function that will be called, with a book object, on completion.


function bookExists(booksInfo){
for (i in booksInfo){
if(booksInfo[i].preview != "noview") $("_google").show();
}
}

Now all we have to do is iterate the returned book object, booksInfo, and if it’s preview flag is not set to noview, go ahead and show the link. In the example I’m using prototypes api to show the google element, $(“_google”).show(), more on this later.

That’s it, hope it helps you.