FIX HTML2Canvas.js GMAP error

FIX HTML2Canvas.js GMAP error

by Liu Peng

HTML

<body>

<!--script-- type="text/javascript" src="html2canvas.js"></script-->
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<button> Run html2canvas test with FIX </button>

<canvas id="dest_canvas"></canvas>


<div id="src_map"></div>

<!--script-- type="text/javascript" src="jquery.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script defer src="https://maps.googleapis.com/maps/api/js"></script>

<script type="text/javascript">

    var src_div = document.getElementById("src_map");
    var dest_canvas = document.getElementById("dest_canvas");

    document.querySelector("button").addEventListener("click", function () {
    
    //FIX
        var transform = $(".gm-style>div:first>div").css("transform");
        var comp = transform.split(","); //split up the transform matrix
        var mapleft = parseFloat(comp[4]); //get left value
        var maptop = parseFloat(comp[5]); //get top value
        $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
            "transform": "none",
            "left": mapleft,
            "top": maptop,
        });
    
    
        html2canvas(document.querySelector('.gm-style'), {canvas: dest_canvas, allowTaint: true , useCORS: true}).then(function (item) {
            console.log('Drew on the existing canvas');
        });
    }, false);

</script>

<script>

    $(document).ready(function(){
        var map = new google.maps.Map(document.getElementById('src_map'), {
            center: {lat: 49.503972, lng: 8.423917},
            zoom: 18,
            mapTypeId: 'roadmap'
        });
        map.setTilt(45);

    });
</script>


</body>

CSS

html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        button {
            position: absolute;
            top: 10px;
            left: 10px;
            border: 1px solid black;
            /*clear: both;
            display: block;*/

        }
        #dest_canvas {
            top: 50px;
            left: 10px;
            border: 1px solid black;
            height: 200px;
            width: 500px;
            position: absolute;
        }

        #src_map {
            top: 300px;
            left: 10px;
            border: 1px solid black;
            height: 200px;
            width: 500px;
            position: absolute;
        }