take screenshot of google map using javascript

[hardikshah157]

Hi

I tried following code: this div "#map-canvas" contents google map.
$('#map-canvas').html2canvas({
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
window.open(img);
}
});
}

Using this code I am getting blank map.
Please find output of Google map.

Let me know how to overcome with this issue.

[niklasvh]

You can't render images (google maps tiles in this case) that reside under different origin unless they are served with cors headers. One way you can overcome this is by using a proxy for the images.

[hardikshah157]

I have tried with php proxy server but facing error: "Uncaught
SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement':
Tainted canvases may not be exported."

I have tried this proxy server:
https://github.com/brcontainer/html2canvas-php-proxy,
With above proxy server I have used Google map direction :
https://developers.google.com/maps/documentation/javascript/examples/directions-simple

On Sat, Dec 13, 2014 at 11:11 PM, Niklas von Hertzen <
notifications@github.com> wrote:

You can't render images (google maps tiles in this case) that reside under
different origin unless they are served with cors headers
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.
One way you can overcome this is by using a proxy for the images.

—
Reply to this email directly or view it on GitHub
#485 (comment)
.

HARDIK SHAH

[tarekahf]

I am facing the same issue. Did you find a solution for this? I want to get a screenshot for google maps using html2canvas. Appreciate your reply.

[smittysmee]

Bump. Any Updates?

[orloxx]

Passing useCORS: true in the options fixed the issue for me. Also, allowTaint: false. It would help if you execute the function after all tiles are visible, you can listen to the tilesloaded and execute html2canvas after that happens.

[NikhilDole]

I am facing the same issue. I tried using useCORS: true and allowTaint: false in the Map Options but that did not help. I am trying to get the screenshot only after the page is loaded. Am I missing anything?

[shaji-Dev]

I'm getting an issue too when taking screenshots of Google Maps, I get this error:

ERROR Error: Uncaught (in promise): InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at CanvasRenderer.<anonymous> (html2canvas.js:6289)
    at step (html2canvas.js:83)
    at Object.next (html2canvas.js:64)
    at fulfilled (html2canvas.js:54)
    at ZoneDelegate.invoke (zone-evergreen.js:365)
    at Object.onInvoke (core.js:39698)
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:851
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:39679)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)
    at invokeTask (zone-evergreen.js:485)
    at ZoneTask.invoke (zone-evergreen.js:470)```

Please, this is very important.