5

I am looking for a method to efficiently print Google maps that have been implemented on a site using the google maps api v3.

I have seen some people using just the window.print js and then 

@media print { body * { visibility: hidden; } #map * { visibility: visible; } #map {visibility: visible;position:absolute; top: 5px; left: 5px;} }

Currently a larger map is displayed to users using fancybox and I have added a print button to this. Ideally I just want to add some jquery or similar to print the map.

However this doesn't seem to really work. Has anyone got any suggestions on the best way to do this

Improve this question
2

6 Answers 6

Reset to default
20

I guess by simple yet subtle DOM manipulation, you can get the "snapshot" of your Google Maps (well, theoretically - any maps :)) viewer and perfectly print it in any browsers. Assuming $mapContainer is the main container of your maps, related code is:

// printAnyMaps :: function printAnyMaps() { const $body = $('body'); const $mapContainer = $('.map-container'); const $mapContainerParent = $mapContainer.parent(); const $printContainer = $('<div style="position:relative;">'); $printContainer .height($mapContainer.height()) .append($mapContainer) .prependTo($body); const $content = $body .children() .not($printContainer) .not('script') .detach(); /** * Needed for those who use Bootstrap 3.x, because some of * its `@media print` styles ain't play nicely when printing. */ const $patchedStyle = $('<style media="print">') .text(` img { max-width: none !important; } a[href]:after { content: ""; } `) .appendTo('head'); window.print(); $body.prepend($content); $mapContainerParent.prepend($mapContainer); $printContainer.remove(); $patchedStyle.remove(); }

Note that you can flexibly replace $printContainer by any print template. Here I just use a simple <div> that serves as a placeholder of the snapshot.

Working code here: http://jsfiddle.net/glenn/6mx21ted

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

This function is printing properly, But there is a slight problem with it. It is printing 3 pages even though map can be fit in only one page.
I tried this, but it shows blank map, only Markers is displayed
@RonakP Mind to share your code in a place like JSFiddle or GitHub so that I can better understand the cause and improve the solution?
Yes, It was the same as yours, not a bit different. What can be affacting?
Thanks for this workaround, in my site works with just the css part of your : ' @media print { img { max-width: none !important; } a[href]:after { content: ""; } } '
|
5

Please note, if you're also using Bootstrap it will break map printing for you. Add this code:

@media print { img { max-width: auto !important; } }

See Twitter Bootstrap CSS affecting Google Maps.

Improve this answer

Comments

2

In HTML, #Gmap is the div you display the google map, and Print Button will call function gmapPrint() once it has been clicked.

<!-- HTML --> <div id="Gmap"></div> <div onclick="gmapPrint();">Print Button</div>

In JavaScript, the gmapPrint() function read the map details and write it on a new window. Then print the new window. 

<!-- JS Script --> function gmapPrint() { var content = window.document.getElementById("Gmap"); // get you map details var newWindow = window.open(); // open a new window newWindow.document.write(content.innerHTML); // write the map into the new window newWindow.print(); // print the new window }
Improve this answer

1 Comment

hi @Jingwen i want to print the map with the page content too? I have receipt layout to print with the map location in it when i use window.Print() it prints all the text in a div but unable to print the google Map? any idea? suggessions?
1

Try this if you want to print the full size of the map for every browser:

function printMap() { $('<style media="print">') .text(` body { width: ${screen.width}px; height: ${screen.height}px; } body { zoom: 50% !important;} `) .appendTo('head'); window.print(); return false;

}

Improve this answer

2 Comments

they got answer in comment and its too late for answer to this question
But a helpful answer. Previous answers are not worked for me (sometimes previous answers are not printing properly).
0

You can use html2canvas.js to convert map div to canvas element, then you can print it as image. Below code works perfect for me:

HTML

<div id="map" style="width:500px;height:500px;"></div> <input type="button" value="Print Map" class="printBtn" />

JavaScript

var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: defLocation, mapTypeId: 'satellite', streetViewControl: false }); $(document).on('click', '.printBtn', function () { map.setOptions({ mapTypeControl: false, zoomControl: false, streetViewControl: false, panControl: false }); var printWin = window.open('', '', 'width=1000,height=700'); var windowContent = '<!DOCTYPE html>'; html2canvas($("#map"), { useCORS: true, onrendered: function (canvas) { windowContent += '<html>' windowContent += '<head><title>Print canvas</title></head>'; windowContent += '<body>' windowContent += '<img src="' + canvas.toDataURL() + '">'; windowContent += '</body>'; windowContent += '</html>'; printWin.document.open(); printWin.document.write(windowContent); printWin.document.close(); printWin.focus(); setTimeout(function () { printWin.print(); printWin.close(); }, 500); map.setOptions({ mapTypeControl: true, zoomControl: true, streetViewControl: true, panControl: true }); } }); });
Improve this answer

Comments

0

I do not have enough reputation to post comments, but hear me out.

For those of you who are having some issues with the accepted answer, where the map has random tiles out of order and/or some entirely grayed out (the fiddle is doing this for me in the latest version of Chrome), you need to add this little snippet to the CSS that is being injected into the page:

#map_canvas div > img { position: absolute; }

where #map_canvas is the selector of your map. I stumbled upon this answer on an old bug report thread and it is saving my life right now: https://issuetracker.google.com/issues/35825130?pli=1

So here is a "corrected" version of the fiddle: http://jsfiddle.net/nbLr3jtf/

Props still go to @Glenn Mohammad for his original answer!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.