Google WebSearch API custom search throws TypeErrors

Question

We have a custom searchbar on our website and I noticed that sometimes (9/10 times) the JS will throw this error, which forces the content that you searched for to not render

www.googleapis.com/customsearch/v1element?key=AIzaSyCVAXiUzRYsML1Pv6RwSG1gu…oogle.com&callback=google.search.Search.apiary####&nocache=1446053383742:2

Uncaught TypeError: google.search.Search.apiary#### is not a function

Search page when error is thrown:

Search page with error truncated/resolved

But if I were to refresh, or research, this error is trumped and will render all of my searches. After looking through the file, I found out the google.search.Search.apiary#### that they are referring to is only mentioned once. So I believe that this error is truncating the entire file when it does show up. What could be causing this, what would be some options for fixing it?

Answer 1

Alright, I stumbled upon an answer:-

After doing some more research, I found that this user on Google Forums also has the same issue.

To put it simply, the way it works is you use a <script> to generate your searchbar.

You have this function + html element for your search bar

<script>
 (function() {
   var cx = '###';
   var gcse = document.createElement('script');
   gcse.type = 'text/javascript';
   gcse.async = true;
   gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
       '//cse.google.com/cse.js?cx=' + cx;
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(gcse, s);
 })();
</script>

<gcse:searchbox-only resultsUrl="/search-results"></gcse:searchbox-only>

So we generated the bar in our <div class="header"> which is a HAML element, as a part of a template. So it was always loaded within every header. Since we have 10 pages, this same script was generated 1 time per page.

Our Google CSE is made to search and then redirect to the url /search-results where it generates the results.

To generate the results, you needed this function and HTML

<script>
     (function() {
       var cx = '###';
       var gcse = document.createElement('script');
       gcse.type = 'text/javascript';
       gcse.async = true;
       gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
           '//cse.google.com/cse.js?cx=' + cx;
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(gcse, s);
     })();
    </script>

Which is the same as the one being loaded in our Header. With this set up, the results page would call that <script> twice when loading in, and cause the JS to break. So after removing the <script> loading the results, it stopped throwing the error.

To put it brief, just make sure you aren't calling the same function twice on your results page, and it should clear up the Uncaught TypeError.

Don't. Repeat. Yourself

--ether