8

I have a map set to 100% of the page width. The map has one marker and is centered on that marker. When I print the browser, I want the map to stay centered on the marker. This is the code I wrote to do so:

var lastPos = map.getCenter();
google.maps.event.addListener(map, "idle", function() {
  lastPos = map.getCenter();
  console.log(lastPos.toString());
});      

google.maps.event.addDomListener(window, "resize", function() {
  google.maps.event.trigger(map, "resize"); 
  map.setCenter(lastPos);
  console.log("Re-center on " + lastPos.toString());
});

This works when I re-size my browser, but does not work when the browser re-sizes itself before printing. If my browser is above a certain width then the marker is shifted entirely off the page (to the right) when the map is printed.

Here is my test case: http://www-sf.talispoint.com/testmapprint.html

Justin McConnell
  • 193
  • 2
  • 6

2 Answers2

7

You would need to add a @media print and give the map the size when printing and then you can do what is explained below.

When a map is printed what happens is that the top left corner is kept and the map is adjusted to fit the @media print size.

If you want the center to stay the same you need to manually change the center of the map. http://jsbin.com/owiwox/33 is an example on how to work around this.

It uses a listener for the print media being applied event and adjusts the center of the map using a ratio on how the map is changed (made smaller)

One thing that you have to take care of is that you might have to make this browser targeted to make it work on all browsers (This solution works well in Chrome) A good resource for making it work across browsers is: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

The js code from the sample above listens to print requests and shifts the map so that the top left corner has the same center as the big map.

To cut the whole story short, this is how it works

  1. You need to put in the ratio of the map vs printed map (or get the size by checking it from JS) You assign it to: var widthRatio = 2; var heightRatio = 3;

  2. You listen for print media being applied and shift the center so that it does not change

  3. After you finish print , you revert the change.

Still here you have the problem that a part of the map will be cut, but there is not a good solution here, since the zoom level -1 tiles might not be cached so when you zoom out to fit bounds you might get no tiles.

Adam Azad
  • 11,171
  • 5
  • 29
  • 70
kaskader
  • 1,931
  • 16
  • 24
  • 1
    To see it a bit more clearly, just try to print this: http://gmaps-samples-v3.googlecode.com/svn/trunk/map_language/map_lang.html -- select a language and you'll see 2 DIVs, when printing they are both are cropped to fit the paper: the top left corner is kept (as the reference) and the size is kept, so the right/bottom part is removed. – miguev Apr 18 '13 at 13:30
1

It seems the problem with your 'printing' or 'printer'.

I did a test:

  1. load the test map and make the browser very wide

  2. print preview and saw the problem you described

  3. But: I can change the printing scale from 'Shrint to fit' (default for IE and FF) to say 30% and was able to print the map as seen on the screen.

Another thought is:

You may try to use another CSS for print to limit the map div width, but I am not sure if that will trigger the resize of the map first (you may refer to this post: Javascript Event Handler for Print)

Community
  • 1
  • 1
user1226919
  • 215
  • 3
  • 8
  • Hi and thanks for your answers. I'm afraid I have unsuccessfully tried to use different styles for the print media. The result is the same -- the browser shrinks the div element that contains the map, but does not re-center. Scaling to a smaller size when printing won't work because the browser scales everything else down too. I need to use the entire page. – Justin McConnell Mar 13 '12 at 21:14