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.