How to View Google Maps in "Print" Mode

How to view Google Maps in print mode?

Google maps put a class gmnoprint on all elements that they do not want to print .. so setting this to display:none in your print css file or popup window will hide them ..

.gmnoprint{
  display:none;
}

Of'course this will hide whatever google deems as not-for-printing.. If you want to select other items you will have to somehow parse their html code :(

how to use media print, for google maps

This cannot be done using CSS.

You will need a special page with a map sized as it has to be printed, or zoom-out the map before printing(this may be done using javascript).

Google Maps API V3 Printing Maps

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

---

Related Topics