Google maps contents are not visible on window.print()

Question

I want to print google maps when user clicks on the print button. I'm using the window.print() to print the page. From a research that I did most of the examples are doing a snapshot of the map and printing only the map on another page. As you can see in the image that I have attached, it shows the Google logo a pin but not the map. I added display:block !important but still is not showing the map on print. Does anyone knows how I can print the map including other details.

Thank you

At what point do you trigger window.print()? Do you load your content via ajax? — fat_mike, Jun 07 '16 at 10:36
what do you mean? the only javascript is the window.print and is inside a php file — George Panayi, Jun 07 '16 at 10:53
have you tried this? http://stackoverflow.com/a/33784680/751711 — fat_mike, Jun 07 '16 at 10:59
yes this one makes a snapshot of the map and removes everything — George Panayi, Jun 07 '16 at 11:00

score 2 · Accepted Answer · edited May 23 '17 at 12:17

So you need to manipulate the javascript in the answer I gave in my comment above in order to include additional content. Here is a working example.

function printMaps() {
  var body               = $('body');
  var appendMap          = $('#before_map');
  var prependMap         = $('#after_map');
  var mapContainer       = $('.map-container');
  var printContainer     = $('<div>');

  printContainer
    .prepend(appendMap)
    .addClass('print-container')
    .css('position', 'relative')
    .height(mapContainer.height())
    .append(mapContainer)
    .append(prependMap)
    .prependTo(body);


  // Patch for some Bootstrap 3.3.x `@media print` styles. :|
  var patchedStyle = $('<style>')
    .attr('media', 'print')
    .text('img { max-width: none !important; }' +
          'a[href]:after { content: ""; }')
    .appendTo('head');

  window.print();

});

Complete fiddle here: http://jsfiddle.net/6mx21ted/141/

Its is based on answer Google Maps API V3 Printing Maps

the `appendMap` & `prependMap` really helped keep the design intact. Thank you @fat_mike — jaspreet21anand, Jul 26 '17 at 04:10

Google maps contents are not visible on window.print()

1 Answers1