Multiple GCSE's on page at one time.

Question

Using the new GCSE code like so:

                    // google custom search engine for the whole site
                (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 + '&gname=sitesearch';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(gcse, s);
                })();

and the element like so:

            <gcse:searchbox gname="sitesearch"></gcse:searchbox>
            <gcse:searchresults gname="sitesearch"></gcse:searchresults>

How do I go about including a second gcse tag on page and Assiging it a new CX: I've tried passing the gname for each to the url like so :

'//cse.google.com/cse.js?cx=' + cx + '&gname=sitesearch';

but to no avail... I've read the documentation where it says;

(Optional) A name for the CSE element object. A name is used to retrieve an associated component by name, or to pair a searchbox component with a searchresults component. If not supplied, Custom Search will automatically generate a gname, based on the order of components on the webpage. For example, the first unnamed searchbox-only has the gname "searchbox-only0" and the second has the gname "seachbox-only1", and so on. Note that the automatically generated gname for a component in two-column layout will be two-column. The following example uses the gname storesearch to link a searchbox component with a searchresults component: which makes it easy to assign the searchbox to the search results I just can't seem to attach the cx code to the actual tag.

I've read this: Multiple Google CSE (Custom Search Engine) Boxes on Same Page but that refers to an older version of GCSE and this one where the accepted answer is use an iframe: How to have multiple Google Custom Search field on the same page

Using an iframe just seems cludgy and not the right way to do it... ?

Answer 1

With Custom Search Element v1 it can be done relatively easy:

<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function () {
  new google.search.CustomSearchControl('CSE_USER_ID:CDE_ID1').draw('cse');
  new google.search.CustomSearchControl('CSE_USER_ID:CDE_ID2').draw('cse2');
});
</script>

<div id='cse' style="width: 100%;">Loading</div>

<div id='cse2' style="width: 100%;">Loading</div>

Demo: Multiple Google CSE on the same page
http://box.galeksic.com/cse.multiple-on-same-page/

JavaScript API Reference (v1)
https://developers.google.com/custom-search/docs/js/cselement-reference

I've tried with v2, but wasn't very successful.

Answer 2

I was struggling with this same problem and came across this post on the google product forums.

Basically, the answer is to use a single CSE and differentiate what you're searching using refinements, which allow you to scope the searched URLs using labels in your CSE settings.

Note: make sure to set the refinement to 'search only sites with this label' assuming that's what you want.

Then, in your HTML code, specify the default refinement you want to use for each results box like so:

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

<gcse:searchresults-only defaultToRefinement="refinement-tag-1"></gcse:searchresults-only>

<gcse:searchresults-only defaultToRefinement="refinement-tag-2"></gcse:searchresults-only>

For my use, I wanted to not display the default refinement tabs (and have the two result boxes look like they were independent) so I used CSS to hide the 'gsc-tabsArea' elements.

More info on v2 CSE API and refinements...

Here's a working codepen: http://codepen.io/mikedaul/pen/xqxYOO?q=flowers

Hope this helps!