Google Maps API V3 Printing Maps

前端未结

关注

 5  1596

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

相关标签:

5条回答

[愿得一人]

2020-12-09 14:18
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲哀的现实

2020-12-09 14:18

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;

}

0 讨论(0)

夕颜

2020-12-09 14:19

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
                    });
                }
            });
        });

0 讨论(0)

鱼传尺愫

2020-12-09 14:22

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
}

0 讨论(0)

盖世英雄少女心

2020-12-09 14:38

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

0 讨论(0)