-2

I'm using the following code which I would like to create a button when pressed it would take a screenshot of the google map and download it as an image.

Currently when button is pressed nothing is happening.

Here is my current code:

    function scrshot() {
     html2canvas(document.getElementById("map"), {
       useCORS: true,
       onrendered: function(canvas) {
            var a = document.createElement('a');
            a.href = canvas.toDataURL("image/png");
            a.download = 'portal_scrshot.png';
            a.click();
            //window.open().document.write('<img src="' + canvas.toDataURL() + '" />');
       }
        });
    }

When I removed useCORS and onrendered I get a screenshot but the google maps is blank.

geocodezip
  • 158,664
  • 13
  • 220
  • 245
K2R
  • 143
  • 1
  • 1
  • 9
  • 1
    Why do you place Javascript code in the HTML section of the snippet? In any case, what you provided is not a [mcve]. Also there are many similar questions which have been answered already. Did you look at any of them? – MrUpsidown Jul 27 '21 at 14:06
  • Related: https://stackoverflow.com/questions/25373830/html2canvas-google-map-is-not-rendering – MrUpsidown Jul 27 '21 at 14:07
  • Related: https://stackoverflow.com/questions/56884126/cannot-convert-google-map-to-image-using-html2canvas – MrUpsidown Jul 27 '21 at 14:08
  • Placed it there just for testing. Yes I have looked at multiple similar questions. – K2R Jul 27 '21 at 14:12
  • 1
    Right. Just for testing. But we can't test it if it's not runnable. You failed to mention what questions (and answers) you have found and tried, what did not work and why. There are multiple, working solutions around. Try them and if you still have an issue, provide a [mcve] that allows to reproduce the problem. – MrUpsidown Jul 27 '21 at 14:15

1 Answers1

0

solved by - > "useCORS": true,

K2R
  • 143
  • 1
  • 1
  • 9