Adding google map layer to BaseMapGallery ArcGIS JS API 3.19

Question

I want to add google map layer to Esri BaseMapGallery control. Everything was going well till I updated the web app to use latest ArcGIS JS API 3.19. After that the BaseMapGallery doesn't change the map to any of google layers. There is not error at console.

You can see live demo I've created her: https://jsbin.com/denoduquzi/edit?html,output

If I just downgrade Esri API version to 3.17 it will work fine, but it fails when upgrading to 3.18 or 3.19

<title>Basemap gallery</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.19/dijit/themes/claro/claro.css">    
  <link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
  <style> 
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #map{
      padding:0;
    }
  </style> 
  <script>
    var djConfig = {
      async: true,
      packages: [
          { name: "agsjs", location: "https://maps.ngdc.noaa.gov/viewers/dijits/agsjs/xbuild/agsjs" }
      ]
    };
  </script>
  <script src="https://js.arcgis.com/3.19/"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script> 
    var map;
    require([
      "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "dojo/parser",

      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane","agsjs/layers/GoogleMapsLayer",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery, arcgisUtils,
      parser
    ) {
      parser.parse();

      map = new Map("map", {
        basemap: "topo",
        center: [-105.255, 40.022],
        zoom: 13
      });

      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        toggleReference: true,
        google: {
          apiOptions: {
            v: '3.6'
          }
        },
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });
    });
  </script> 


  <div data-dojo-type="dijit/layout/BorderContainer" 
       data-dojo-props="design:'headline', gutters:false" 
       style="width:100%;height:100%;margin:0;">

    <div id="map" 
         data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region:'center'" 
         style="padding:0;">

      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane" 
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>

    </div>
  </div>

Answer 1

I felt I should mention it. I think that's not allowed to consume Google Maps content from third party APIs -> Google Maps Terms of Use (section 10.1):

No access to APIs or Content except through the Service. You will not access the Maps API(s) or the Content except through the Service. For example, you must not access map tiles or imagery through interfaces or channels (including undocumented Google interfaces) other than the Maps API(s).

Besides that, technically there is no problem on doing it like this:

//Adding Google Imagery Basemap
var mapGMapSat = new Basemap({
  layers: [new BasemapLayer({
    type: "WebTiledLayer",
    url : "https://mts1.google.com/vt/lyrs=s@186112443&hl=x-local&src=app&x={col}&y={row}&z={level}&s=Galile", 
    copyright: "Google Maps"
  })],
  id: "gmapsat",
  thumbnailUrl: "https://maps.ngdc.noaa.gov/viewers/dijits/agsjs/xbuild/agsjs/dijit/images/googlehybrid.png",
  title: "Google Imagery"
});
basemapGallery.add(mapGMapSat);

As you can see here: https://jsbin.com/rabacoq