How to fix the Google Map API when print the whole page?

问题

I'm trying to just print exactly what the user sees in maps when he clicks in the Print Button, but I don't know why, the map changes completely.

I just want that the map resizes the image to fit exactly in the Print. It doesn't matter if the maps will be small or large.

This is what the user sees:

But I'm getting this:

Portrait

Landscape

Thanks!

回答1:

Google Map API does not support printing:

Printing from the JavaScript API is not supported. This is because printing support is inconsistent across commonly used browsers. We recommend using the Static Maps API for printing purposes.

As it is mentioned, a solution is to use Static Map API. You simply need to get the viewpoint of the map (boundaries) and send it to static map API and retrieve an image that you can easily print. The Static Map API even supports things like markers.

An example

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Clabel:C%7C40.718217,-73.998284
&key=YOUR_API_KEY

来源：https://stackoverflow.com/questions/41354384/how-to-fix-the-google-map-api-when-print-the-whole-page