Cannot convert google map to image using html2canvas

Question

I tried to convert google map to image using hml2canvas. But it didn't help me. I got an empty png file. Please help.

I tried few solutions but it didn't work for me https://github.com/niklasvh/html2canvas/issues/145#issuecomment-11449761 http://jsfiddle.net/Behseini/j17mwmjm/

I'm not able to use google static API because I generate google map from kml file and have lot of coordinates which exceeds the GET Url limits.

    <div id="map-canvas" style="height: 500px;"></div>
    <div id="maptoimage"><img id="imagemap" src="" /></div>
     <script>
        html2canvas($("#map-canvas"), {
        seCORS: true,
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas);
            // to show the generated image in div
            $("#maptoimage").append(canvas);
            // Clean up 
            //document.body.removeChild(canvas);
        }
     });
     </script>

The google map is loaded in map-canvas div.

Answer 1

This is working in my windows chrome browser, the only issue is that the downloaded image file has no extension, but it works when I rename it and add .png

Note that you have a typo and are missing an u at useCORS , this prevents some images from being loaded.

 $(function () { html2canvas($("#map-canvas"), { useCORS: true, onrendered: function(canvas) { document.body.appendChild(canvas); // Convert and download as image Canvas2Image.saveAsPNG(canvas); // to show the generated image in div $("#maptoimage").append(canvas); // Clean up //document.body.removeChild(canvas); } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Original: <div id="map-canvas"><img src="https://i.imgur.com/raCdHzP.png"></div> Copy: <div id="maptoimage"></div> 

Answer 2

Here is a working code snippet with which I get a valid and readable PNG file with the appropriate .png extension and a custom filename.

 function initMap() { var map; var latlng = new google.maps.LatLng(49.241943, -122.889318); var myOptions = { zoom: 12, center: latlng, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); } function saveAs(uri, filename) { var link = document.createElement('a'); if (typeof link.download === 'string') { link.href = uri; link.download = filename; //Firefox requires the link to be in the body document.body.appendChild(link); //simulate click link.click(); //remove the link when done document.body.removeChild(link); } else { window.open(uri); } } $(function() { $("#btnSave").click(function() { html2canvas($("#map-canvas"), { useCORS: true, onrendered: function(canvas) { saveAs(canvas.toDataURL(), 'my-cool-filename.png'); } }); }); }); 

 #map-canvas { height: 150px; width: 150px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="map-canvas"></div> <script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script> <input type="button" id="btnSave" value="Save PNG" />