Google Books Embedded viewer API javascript implementation - google.books.load is not a function

Question

I'm trying to implement the Google Books API on a Library website where I don't have full access to the html - just the homepage, css, and a custom.js file. I have a bit of experience with python but i'm very new to javascript. The site uses AngularJS.

Not having access to the html means I have to add script with js - so using the example from the [Google Books API Developer Guide][1] I've converted the example scripts:

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

      function initialize() {
        var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
        viewer.load('ISBN:0738531367');
      }

      google.books.setOnLoadCallback(initialize);
    </script>

Into this:

(function() {
                var gb = document.createElement('script'); gb.type = 'text/javascript';
                gb.src = 'https://www.google.com/books/jsapi.js';
                document.head.appendChild(gb);
                     
                })();

(function() {
                var gbl = document.createElement('script'); gbl.type = 'text/javascript';
                gbl.innerHTML = "google.books.load(); function initialize() { var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas')); viewer.load('ISBN:0738531367');} google.books.setOnLoadCallback(initialize);";
                document.head.appendChild(gbl);             
    })();

and then later create a <div> to hold the viewer

app.component('prmFullViewServiceContainerAfter', {
    bindings: {parentCtrl: '<' },
        template: '<div id="viewerCanvas" style="width: 600px; height: 500px"></div>'
});

But I keep getting a version of google is not defined or google.books.load is not a function. I thought it was to do with the api script loading after the inline script, but even if I remove the inline script and try running it in the console after the page is loaded I get a similar result.

Just to say, I understand that if I run this I will only get one book with the ISBN defined in the script on every page. I'm planning to work out how to grab the book identifier from the page once I've managed to even display the viewer.

Please let me know if I haven't provided enough info - js is very new to me.