Search code examples
jqueryhtmlcordovahtml2canvas

Html2canvas - capture google map to image in phonegap application

I want to capture google map with overlays to an image for future uses. I just tried with html2canvas, like 

 html2canvas($('#map'), {
                        useCORS: true,
                        onrendered: function(canvas) {
                           document.body.appendChild( canvas );
                        }
 });

This works fine on desktop browsers like chrome & FF. However in phonegap app it just creates the image with map zoom buttons etc. But map tiles are missing. Just map controlls are there.

Solution

  • Got it.. :)

    add allowTaint:true

    html2canvas($('#map'), {
                        useCORS: true,
                        allowTaint:true,
                        onrendered: function(canvas) {
                           document.body.appendChild( canvas );
                        }
 });