CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Caleb Pitman
Caleb Pitman

Reputation: 1165

print google maps div with layers/markers

How can I print Google Maps with all the layers/markers?

Using $('#map').html() and placing contents in a new window doesn't work. It only shows the map base layer. For example, the below code doesn't work. 

function PrintElem(elem)
{
    Popup($(elem).html());
}

function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>my div</title>');
    /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10

    mywindow.print();
    mywindow.close();

    return true;
}

Would also be nice to fit the map to landscape/portrait for printing.

Upvotes: 1

Views: 923

Answers (1)

Caleb Pitman
Caleb Pitman

Reputation: 1165

I ended up just recreating the map in a print-optimized popup.

OPEN THE POPUP:

mapData = {
    data:someMapData(),
};
window.open('print.html', 'window1', 'height=750,width=1000');

FROM THE POPUP, ACCESS DATA:

var data = window.opener.mapData;

In the print window, I adjust the map size based on the print orientation (landscape/portrait). 

if(type=='portrait') {
    $('#wrap').css('height','780pt').css('width', '600pt'); 
}
if(type=='landscape') {
    $('#wrap').css('height','660pt').css('width', '900pt'); 
}
if(type=='turnbyturn') {
    $('#wrap').css('height','780pt').css('width', '600pt'); 
}

It prints well, and for my purposes it worked out better than trying to print from the app itself. You can easily grab the route data, polylines, points, etc, and redraw it on the map.

Upvotes: 0

Related Questions