Google Map screen capture is not working properly using html2canvas

Question

Google Map screen capture is not working properly. Grey screen appears in the output image file. For simple text in div section works fine. Any suggestion for this.

I tried like this:

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src ="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="html2canvas.js?rev032"></script> 
</script>


<script type="text/javascript">

function initialize()
    {
    var mapProp = {
          center:new google.maps.LatLng(51.508742,-0.120850),
          zoom:5,
          mapTypeId:google.maps.MapTypeId.ROADMAP
      };
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);

$(window).load(function(){

    $('#load').click(function(){

            html2canvas($('#googleMap'), {
                onrendered: function (canvas) {
                    var dataURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    window.location.href = dataURL;
                }
            });

    });
});
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<input type="button" value="Save" id="load"/>
</body>
</html>

UPDATED:

I replace the code section as below. Working fine but saved as .part file. Is it possible to give it a name while saving to local disk ?

$(window).load(function(){

    $('#load').click(function(){

            html2canvas($('#googleMap'), {
            useCORS: true,
                onrendered: function (canvas) {
                var dataUrl= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

                window.location.href = dataUrl;
                                    }
            });

    });
});

score 0 · Answer 1 · answered Aug 30 '21 at 01:13

You can use a js library called FileSaver. Its usage is:

 saveAs(myImage, "image.png");

I'm currently trying to save the google map with html2canvas but I'm getting grey background.

Also, the new usage for html2canvas is:

html2canvas(cloneThisCanvas).then(function(canvas) {
    //your canvas callback
});

Google Map screen capture is not working properly using html2canvas

1 Answers1