Trying to export map as image with Leaflet and gridLayer googleMutant with typescript in a Angular App

Question

I am trying to export the map rendered as an image, using Leaflet and Google Mutant

This is my definition on the layer.

   const googleMaps = L.gridLayer['googleMutant']({
      maxZoom: config.maps.maxZoom,
      type: 'hybrid', // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
      styles: [
        {
          featureType: "poi.business",
          stylers: [{visibility: "off", color: "#99FF33"}],
        },
        {
          featureType: "poi",
          stylers: [{visibility: "off"}],
        },
        {
          featureType: "transit",
          elementType: "labels.icon",
          stylers: [{visibility: "off"}],
        },
      ],
    }).addTo(this.map);

   ...

    L.control.layers({
      'Satellite': googleMaps,
    }).addTo(this.map);

And the method which I am trying to save the image:

leafletImage(this.map, (err, canvas) => {
   var img = document.createElement('img');
   var dimensions = this.map.getSize();
   img.width = dimensions.x;
   img.height = dimensions.y;
   img.src = canvas.toDataURL();   
   window.open(img.src);
   document.getElementById('images').innerHTML = '';
   document.getElementById('images').appendChild(img);
});

The problem is that I have always the same output, a gray image. I have been searching a lot about it, but I do not find the solution. Any suggestion will be welcome.