html2canvas Google Map - Map keeps moving position

Question

So I've been trying to find the most efficient method of saving a Google Map (v3 API) as an image. At first I tried using snapshopcontrol.js, which works great, however I have some maps which have over 150 markers on them, so the URL limit is exceeded.

Next I tried the following code with html2canvas, which does create an image of the map, however as soon as the html2canvas renders it, the position of the map shifts and my markers now hover over what appears to be lat 0 lng 0.

var element = $('#mapDiv');
html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
            var dataUrl= canvas.toDataURL("image/png");
            document.write('<img src="'+dataUrl+'" />');
        }
    });

If the map would NOT shift and stay in the correct position, it would be PERFECT. Can anyone shed any light on WHY this is happening?

Screen shot of BEFORE html2canvas is applied

Screen shot of AFTER html2canvas is applied

UPDATE In my JS console, it says

"The XSS Auditor refused to execute a script in "http://...." because its source code was found within the request. The auditor was enabled as the server sent neither an 'X-XSS-Protection' nor 'Content-Security-Policy' header."

"Cross-origin image load denied by Cross-Origin Resource Sharing policy." "data:image/png;base64,iV............"

Answer 1

I have ran into same problem. It seems html2canvas is not appending transform styles from parent to child. In my case problem was:

<div class="mapContainerClass" style="transform: translate3d(9px,-5px,0px);" >
    <div class="markerClass" style="transform: translate3d(89px,-56px,0px);" ></div>
</div>

All i did was to calculate cumulative translation and add it for the each marker. However you should revert it back aswell

About your Cross Origin problem: it seems map server is not allowing cross image load. It should to download images and you must set useCORS: true at html2canvas options