Google Map not appearing in the Screenshot

[arifron]

[leonzdev]

Google map uses a canvas of type "webgl2" which cannot be captured unless preserveDrawingBuffer is set to true when the canvas context is created.

You can use the workaround in https://stackoverflow.com/a/55762772

[jasjamjos]

@leonzdev hi checked out the link you shared, tried to implement it didnt work, can you show a snippet of it being used in a react/nextjs component?

[leonzdev]

I have a injectHacks.ts with

// @ts-nocheck
// source: https://stackoverflow.com/a/55762772
HTMLCanvasElement.prototype.getContext = function(origFn) {
    return function(type, attribs) {
        attribs = attribs || {};
        if (type === 'webgl' || type === 'webgl2') {
            attribs.preserveDrawingBuffer = true;
        }
        return origFn.call(this, type, attribs);
    };
}(HTMLCanvasElement.prototype.getContext);
  
export {}

Then in my App.tsx

// other imports
import ‘./injectHacks’;

// other stuff

function App() {
  // some React code
}

export default App;

The key is to override HTMLCanvasElement.prototype.getContext before your map components load.

[jasjamjos]

I think its working.. tho I'm getting another error. its probably because of the library im using.. gonna post the error here just in case someone knows the solution

Uncaught TypeError: Converting circular structure to JSON --> starting at object with constructor 'Window' --- property 'window' closes the circle at JSON.stringify (<anonymous>) at en-tv-chart.132c7060.html:1:1253 at en-tv-chart.132c7060.html:1:1279 at en-tv-chart.132c7060.html:1:7330

[demir10x]

We can't take screenshots of Google Maps. This is because the google map component behind the scene is wrapped in an iframe tag which is a separate document hence the package is not able to take its screenshot.