Google Books Embedded Viewer API Example to Read Books Using ISBN Number in Javascript

Welcome folks today in this blog post we will be fetching the google books and reading it in browser using the isbn number and we will be using the google books embedded viewer api in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
  <head>
      <body class="bg-light">
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>Google Books Embedded Viewer API Example</title>

      <div class="container">
        <h1 class="display-4 align-middle mt-5 text-dark">Google Api App</h1>
      </div>

      <div class="container mt-5 p-3 border-0">
          <div class="card text-white bg-dark mb-3 float-left shadow-lg" style="max-width: 20rem;">
              <div class="card-header">Google Books Api App</div>
              <div class="card-body">
                <h4 class="card-title">Type your ISBN below</h4>
                <input type="text" class="form-control isbn" placeholder="Enter your isbn">
                <button class="btn btn-primary mt-2 mb-2">Start Reading</button>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem vero inventore non fuga rerum ducimus..</p>
              </div>
            </div>
      </div>

      <div id="viewerCanvas" style="width: 800px; height: 800px" class="mr-3 float-right"></div>

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

      <script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>

<!DOCTYPE html>

<head>

<title>Google Books Embedded Viewer API Example</title>

<h1 class="display-4 align-middle mt-5 text-dark">Google Api App</h1>

</div>

<div class="card-header">Google Books Api App</div>

<h4 class="card-title">Type your ISBN below</h4>

<button class="btn btn-primary mt-2 mb-2">Start Reading</button>

<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem vero inventore non fuga rerum ducimus..</p>

</div>

As you can see guys we are importing the bootstrap library cdn and also we are importing the google books api javascript sdk and including the script tag at the bottom. And now we have the simple canvas in which the books will be rendered based upon the correct isbn number given the user. We have the input field where the user can write the isbn number and then we have the button to submit the form. And we are using the bootstrap form classes to style the app. Now if you open the app inside the browser you will see the below result

Now we need to write the javascript code which is required for this application. Just make a script.js file and copy paste the below code into it

script.js

const button = document.querySelector(".btn-primary");
        const isbn = document.querySelector(".isbn");

        button.addEventListener("click",initialiase);

        google.books.load({"language":"en"});

        function nextStep(viewer){
          window.setTimeout(function(){
            viewer.nextPage()
            nextStep(viewer);
          },3000)
        }

        function alertNotFound(){
          alert("Book not found!");
        }

        function initialiase(){
          var viewer = new google.books.DefaultViewer(document.getElementById("viewerCanvas"));
          viewer.load("ISBN:"+isbn.value,alertNotFound);
        }

const button = document.querySelector(".btn-primary");

const isbn = document.querySelector(".isbn");

button.addEventListener("click",initialiase);

google.books.load({"language":"en"});

function nextStep(viewer){

window.setTimeout(function(){

viewer.nextPage()

nextStep(viewer);

},3000)

}

function alertNotFound(){

alert("Book not found!");

}

function initialiase(){

var viewer = new google.books.DefaultViewer(document.getElementById("viewerCanvas"));

viewer.load("ISBN:"+isbn.value,alertNotFound);

}

As you can see we are binded a onclick event listener on the button. Once the button has been clicked by the user we are making a request to the google books embedded viewer api passing the isbn number of the book and if it’s correct then the book will be rendered inside the canvas. If it’s incorrect then we will be showing the error message that the book doesn’t exist as shown below

And now if you type the correct isbn number of the book then the book will be rendered on the canvas as shown below