All geek questions in one place

Maps Google Maps API V3

I am looking for a method for efficiently printing google maps that were implemented on a site using google api v3 maps.

I saw some people only use window.print js and then

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

Currently, for users using fancybox, a large map is displayed, and I added a print button to it. Ideally, I just want to add some jquery or similar maps to print.

However, this does not work. Has anyone got any suggestions on how to do this?

+4
source share
4 answers

I think that with a simple but subtle DOM manipulator, you can get a “snapshot” of your Google Maps (well, theoretically - any map :)) and print it fine in any browser. Assuming $mapContainer is the main container of your maps, the 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(); }

Please note that you can flexibly replace $printContainer with any print template. Here I just use a simple <div> which serves as a placeholder for the snapshot.

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

+18
source

Please note: if you also use 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 .

+5
source

In HTML, #Gmap is the div on which the google map is displayed, and the print button calls the gmapPrint () function after it is clicked.

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

In JavaScript, the gmapPrint () function reads map data and writes it to a new window. Then print a 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 }
+2
source

You can use html2canvas.js to convert a div div into a canvas element, then you can print it as an image. The 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 }); } }); });
0
source

Source: https://habr.com/ru/post/1441815/

More articles:


All Articles