Unable to print google map with icons

Question

When I am printing google map; it does not print icons; how can I print complete google map I am using google maps api v3 for javascript

score 0 · Answer 1 · answered Jul 23 '14 at 16:43

many days trying print the icons and routes, so finally i did it!!!!!!!! i found a js script that convert html to canvas and i thought that will be the solution but unfortunately it wasn't at all.

if found that, when i use it and says to the browser to print the page finally show it!!!! but the canvas again doesn't show the icons ¿...?

so i just executed the script at the on load and append the result canvas into a div behind the map (if you put display:none don't work!). sorry by my english :) here a bit code:

<div id="imprimir">
    <h1><?php echo $direccion;?></h1>
    <div id="distancia"></div>
    <div id="map-canvas" style="margin: 0;padding: 0; height: 550px;z-index:10"></div>                          
    <div id="captura" style="position:absolute;top:100px;left:50px;"></div>
</div>
//------------ ... 
Google Map code here
//------------ ...
<script>
    html2canvas($("#imprimir"), {
        onrendered: function(canvas) {
            $("#captura").html(canvas);                                        
        }
    });            
</script>

well, i hope this help you!!!

score 0 · Answer 2 · answered Dec 09 '15 at 19:12

 $("#btnPrint").click(function () {
        var contents = $("#map_canvas").html();
        var frame1 = $('<iframe />');
        frame1[0].name = "frame1";
        frame1.css({ "position": "absolute", "top": "-1000000px" });
        $("body").append(frame1);
        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
        frameDoc.document.open();
        //Create a new HTML document.
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
        //Append the external CSS file.
        frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
        //Append the DIV contents.
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            frame1.remove();
        }, 500);
    });

score 0 · Answer 3 · edited May 23 '17 at 11:52

There are several other questions addressing this issue: How to print Google Map markers

The short, the Google Maps Javascript API doesn't print overlays (markers, lines) correctly or at all. You can use the Google Maps Static API, but you will be limited to the amount of overlays you draw on the map. This is, however, the best way to get a reliable print.

The long, the markers have the class 'gmnoprint', which disables them from showing up on the printed rendering. You can iterate through the markers and remove this class, which should allow them to be printed on the page. As far as I know, this will not work for the direction lines.

Unable to print google map with icons

3 Answers3