Issue when creating image of google maps

[da-saiyam-shah]

I am using google maps, and drawing some shapes on maps like Circle, Polygon etc. When I try to capture 1st time, it works perfectly, but when I do it second time, it is not giving proper screenshot.

Expected Behavior

Should capture proper screenshot even on multiple attempts.

When I capture 1st time.

But when I capture 2nd time?

Also, if I reload the page, it will work 1st time, 2nd time it will not work.

[biiibooo[bot]]

👋 @da-saiyam-shah

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[Y3drk]

Run into the same issue

[fabientownsend]

I ran into a very similar issue, there way I have it is as follows:

1. I'm rendering the map with GoogleMap from @react-google-maps/api
2. Download the map once which is the expected result using the following code

htmlToImage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
  .then(function (dataUrl) {
    var link = document.createElement('a');
    link.download = 'my-image-name.jpeg';
    link.href = dataUrl;
    link.click();
  });

3. when downloading a second time I have the similar issue initially shown, even though I haven't made any change to the GoogleMap component

From the console log, I have the following error, but I don't think it is related:

app-index.js:32 Error while reading CSS rules from https://fonts.googleapis.com/css?family=Google+Sans+Text:400&text=%E2%86%90%E2%86%92%E2%86%91%E2%86%93&lang=en DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

[fabientownsend]

I actually managed to get it working. The source of the issue seems to be related to caching, using the following parameter did the trick for me: includeQueryParams: true.

Here is a similar issue with its solution that lead me to that resolution: https://github.com/bubkoo/html-to-image/issues/431

[da-saiyam-shah]

@fabientownsend By setting includeQueryParams: true, does it solve the original issue? or this particular error: app-index.js:32 Error while reading CSS rules from https://fonts.googleapis.com/css?family=Google+Sans+Text:400&text=%E2%86%90%E2%86%92%E2%86%91%E2%86%93&lang=en DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

[fabientownsend]

@fabientownsend By setting includeQueryParams: true, does it solve the original issue? or this particular error: app-index.js:32 Error while reading CSS rules from https://fonts.googleapis.com/css?family=Google+Sans+Text:400&text=%E2%86%90%E2%86%92%E2%86%91%E2%86%93&lang=en DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

It only solves the original issue 👍

I can confirm that the other error that I mentioned Error while reading CSS rules from... is unrelated to the original issue