html2canvas dynamically rendered div - reactjs

Question

I am trying to use html2canvas (http://html2canvas.hertzen.com) to take a screenshot of my page that contains a google maps view, but I am running into an issue where the resulting screenshot is white, except for the marker. What (possibly) complicates the issue is that I am (trying to) creating a React application.
I use this code to take the screenshot:
takeScreenshot = () => {
let googleMapsView = document.querySelector('.google-map');
html2canvas(googleMapsView).then((canvas) => {
let imgData = canvas.toDataURL('image/png');
console.log(imgData);
});
}
This is the page I'm trying to take a screenshot of:
The code above generates the following image:
As you can see, it generates the screenshot and captures the marker and the bottom "Map Data ©2018 Google" however, the resulting screenshot is still blank.
In the documentation on their Github, I see an option to preload here: https://github.com/niklasvh/html2canvas/wiki/Documentation#preload-content
However, this seems to have been removed from the library since the 0.5.0 beta version - they're now in 1.0.0 alpha, so going back that far to such an outdated library is not really an option.
How can I tell html2canvas to wait for the GMaps component to be rendered, before taking the screenshot?

Answer 1

You need to add param useCORS to use it with google maps, in your case:
takeScreenshot = () => {
let googleMapsView = document.querySelector('.google-map');
html2canvas(googleMapsView, {useCORS: true}).then((canvas) => {
let imgData = canvas.toDataURL('image/png');
console.log(imgData);
});
}

Answer 2

Have you tried to put your code inside the google map listener
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
takeScreenshot = () => {
let googleMapsView = document.querySelector('.google-map');
html2canvas(googleMapsView).then((canvas) => {
let imgData = canvas.toDataURL('image/png');
console.log(imgData);
});
}
});
See also the events section in the Google Maps Reference.