Convert Google Maps with Routes to Image using HTML5 Canvas in ASP.Net

Last Reply on Mar 22, 2018 04:14 AM By Mudassar

Posted on Mar 22, 2018 04:13 AM


I want to convert div content in image.

I am using following code for that


function genScreenshot() {
                                    html2canvas(document.getElementById('dvgrid'), {
                                        onrendered: function(canvas) {
                                            if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                                                var blob = canvas.msToBlob();
                                                window.navigator.msSaveBlob(blob,'Test file.png');
                                            else {
                                                $('#test').attr('href', canvas.toDataURL("image/png"));
                                                $('#test').attr('download','Test file.png');

 <div id="dvMap" style="width: 900px; height: 500px; overflow: auto;">
                                    <div id="box1">

                                    <input type="button" id="btnPrint" value="Print" onclick="genScreenshot();" />

But problem is,it display only route while convert it into image and save as image only contain route. While converting div into image it will not convert while div but display only route in the image.

Please refer following image for that.

Anyone have any idea about it why it is happen? Please Suggest!!

Posted on Mar 22, 2018 04:14 AM

Google Maps won't work with Canvas method. It is not possible to create Image of Google Map with Canvas