Google Maps Center (V3) in a browser

Question

I have a map equal to 100% of the page width. The map has one marker and is focused on this marker. When I print the browser, I want the map to remain centered on the marker. This is the code I wrote for this:

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 resize my browser, but it does not work when the browser re-parses itself before printing. If my browser exceeds a certain width, the marker is completely shifted from the page (to the right) when printing the map.

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

Answer 1

You will need to add @media print and specify the size of the card when printing, and then you can do what is described below.

When a map is printed, it happens that the upper left corner is saved, and the map is adjusted according to @media print size.

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

It uses a listener for the print event used and sets the center of the map using the ratio of the number of map changes (reduced)

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

The js code in the above example listens for print requests and shifts the map so that the upper left corner has the same center as the large map.

To shorten the whole story, this is how it works.

• You need to specify the ratio of the card and the printed card (or get the size by checking it with JS). You assign it: var widthRatio = 2; var heightRatio = 3;

• You listen to the print medium you are using and move the center so that it does not change

• After printing is complete, you will return the change.

There is still a problem that part of the map will be cut out, but there is no good solution, since image level -1 tiles may not be cached, so when you scale down to the size that you can get there are no tiles.

Answer 2

There seems to be a problem with your "print" or "printer."

I did a test:

• download a test card and make the browser very wide.

• print a preview and see the problem you described.

• But: I can change the print scale from “Shrint to fit” (default for IE and FF) to say 30%, and was able to print the map as shown on the screen.

Another thought:

You can try using different CSS for printing to limit the width of the div div, but I'm not sure if this will cause the map to resize first (you can refer to this post: Javascript event handler for printing )