HTML2Canvas.js GMAP CANVAS error

HTML2Canvas.js GMAP CANVAS error

by denis_miroshnikov_ts

HTML

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link rel="stylesheet" href="main.css" type="text/css"-->
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            border: 1px solid black;
            top: 300px;
            height: 200px;
            width: 500px;
            position: absolute;
        }
        #mcanvas {
            border: 1px solid black;
            top: 300px;
            height: 200px;
            width: 500px;
            position: absolute;
            /*opacity: 0;*/
        }
        #button {
            border: 1px solid black;
            clear: both;
            display: block;
        }
    </style>

</head>

<body>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.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>


<button id="button">Run html2canvas</button>
<canvas id="mcanvas"></canvas>
<div id="map"></div>


<script>
    //var dest_canvasobj;
    //var src_elem;
    //var map;

    $(document).ready(function(){

     var dest_canvasobj = $('#mcanvas').get(0);
     var src_elem = $('#map').get(0);
     var map = new google.maps.Map( src_elem ,{
            center: {lat: 49.503972, lng: 8.423917},
            zoom: 18,
            mapTypeId: 'roadmap',
            disableDefaultUI: true
        });
        map.setTilt(45);


        $('#button').click(function () {
            html2canvas(src_elem, {canvas: dest_canvasobj, allowTaint: true , useCORS: true}).then(function(obj) { console.log('Draw on the existing canvas'); });
        });

    });
</script>


</body>