title: Printing Google Maps - screen size affecting print size
body: <p><strong>Background</strong></p>
  
  <p>I'm writing a Google Maps web app (API v3) and I want the user to be able to print what they see on screen.</p>
  
  <p>The map div is 100% wide and 100% high with various bits and bobs over-layed including the markers and application controls etc.</p>
  
  <p>I'm using a @print set of css rules to remove the bits I don't want to print and all that is working perfectly.</p>
  
  <p><strong>The problem</strong></p>
  
  <p>The problem I am having is that the map is far too wide for the page (and actually a bit too high as well). (with size set to 'Shrink To Fit' in the print set up).</p>
  
  <p>I'm using Firefox mainly for the development, but testing in Chrome and IE and am seeing the same thing.</p>
  
  <p>If I have a full screen browser window on my 1920x1080 monitor the pint preview and print output is only about 50% of what is shown on screen.</p>
  
  <p>If I reduce the print size in the Print Preview dialog to 50% things look about right.</p>
  
  <p>If I reduce my browser window to about half its horizontal size (and by just a little bit vertically) then things look just about right.</p>
  
  <p>So, the problem seems to be browser window size dependent - ie the browser window is showing more map than can be printed.</p>
  
  <p>Essentially what I'm trying to achieve is having the all of the displayed map print as tall and as wide as possible dependent on the users printer settings - a true 'Shrink To Fit' if you like. But I can't seem to get anywhere with this.</p>
  
  <p><strong>'Solutions' I've tried</strong></p>
  
  <p>One solution that's been suggested in other threads is to generate a fixed-size popup window of a suitable size for the print - this is what I previously did in my API v2 application (I'm re-writing from scratch for v3) - but this isn't working either. With the popup I only get the smaller 'viewport' displayed - ie roughly the same portion of the map as would be printed (I guess this confirms that my window size is about right!).</p>
  
  <p>I'm generating the popup with the following:</p>
  
  <pre><code>var content = window.document.getElementById("map-canvas"); // get you map details
  var logoBox = "&lt;div class='logoBox' id='logoBox' style='width:300px;    height:65px; border-radius:4px; background-color:rgba(255,255,255,0.75);    box-shadow:5px 5px 2px rgba(50,50,50,0.5);  float:left; z-index:10; position:absolute;  top:10px;   left:10px; padding:5px;'&gt;&lt;img src='myLogo_300x65.png' id='myLogo'&gt;&lt;/div&gt;";
  var printWindow = window.open("","printWindow", "Width=640, Height=620,location=no,menu bar=no,resizable=no,scrollbars=no,status=no,titlebar=no,toolbar=no"); // open a new window
  printWindow.document.write(content.innerHTML); // write the map into the new window
  printWindow.document.write(logoBox); 
  printWindow.print(); // print the new window
  </code></pre>
  
  <p>There's another oddity with this as well - on mobile the pop-up map displays with the same markers set displayed as the main calling page, but on FireFox on the desktop it opens up with just one of my markers.</p>
  
  <p><strong>Ideas</strong></p>
  
  <p>I'm thinking the solution might be something to do with one or more of the following:</p>
  
  <ul>
  <li>the print css forcing a proper scale to fit, or 
  <li>placing a printable element in the bottom right of the map in case the browser is seeing the map tiles as not important enough to scale to, or
  <li>needing to do a getBounds on the bigger map and setting those on the smaller map to zoom the map appropriately.
  </ul>
  
  <p>Re the final point here, I've tried to get my head around this but am struggling with calling a fitBounds() in the new pop-up window from the main window.</p>
  
  <p>So far I've got:</p>
  
  <pre><code>var displayedMapBounds = new google.maps.LatLngBounds;
  displayedMapBounds = map.getBounds(); // map is the Google Maps instance on the main page
  // printWindow.map.fitBounds(displayedMapBounds); // This doesn't work for semi-obvious reasons
  printWindow.document.map.fitBounds(displayedMapBounds); // This doesn't work for semi-obvious reasons
  </code></pre>
  
  <p>This is inserted in the above code after the dowcument.write statements.</p>
  
  <p>I'm sure those semi-obvious reasons are actually obvious to most, but is there a way to reference the map object and manipulate it from the main window like this?</p>
  
  <p>Any pointers gratefully received as this is the show-stopper for the relaunch of the site.</p>