4

I need to create a pdf from a webpage with a map embedded in it. Im using wkhtmltopdf, elixir-pdf-generator for my wrapper and ng-maps on the front end.

The PDF works fine except for the map portion. The markers are in the right place in relation to the page but the map itself seems to position itself down and to the right of the of the original center. A phenomenon that increases the further you are zoomed out. Note: This only happens on the PDF, the webpage works as intended.

Its not a js delay issue or a resizing issue. The coordinates are correct going to the backend. The map just seems to consistently offset when rendering the pdf. And offsets in the very same way every-time.

Was hoping someone has come across this or maybe point me in the direction of what is causing this.

EDIT: One thing I noticed was setting .gm-style * {transform-none} duplicates the issue in the html. It seems to be losing some transform css somewhere when generating the pdf.

blankpage985
  • 61
  • 11
  • At least it is always the same offset - is your zoom always the same? The only solution I can imagine is a little dumb - it is to adjust the coordinates before you print and to readjust after. – dmgig May 30 '18 at 21:47
  • Thanks. Unfortunately there are 1000s of markers and they are based on addresses. I would have to know exactly how much to adjust for so that each marker would be correct. The closest thing I have googled is this https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1820. However a fixed width does not solve my issue. – blankpage985 May 30 '18 at 21:59
  • Ah I see. Tough issue. One final idea - use something like an html to png converter - convert the map div to a png, swap it out for the pdf creation, then return the map div once it is complete. These are all hacky of course. Anyway - good luck! – dmgig May 30 '18 at 22:05
  • Apparently there is something called wkhtmltoimage which is part of what you're using - provided it doesn't show the same issue. – dmgig May 30 '18 at 22:09
  • Still have not overcome this. One thing I noticed was setting .gm-style * {transform-none} duplicates the issue in the html. It seems to be losing some transform css somewhere when generating the pdf. – blankpage985 Jun 26 '18 at 20:02
  • Well that's interesting. Have you tried doing a translate transform on that element then? Or perhaps just the topmost Google-created parent div (maybe whatever is the direct child of `.gm-style`)? https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate You'd probably have to play with it, but that's def easier than my coordinate suggestion. Though the same effect. – dmgig Jun 26 '18 at 20:43

1 Answers1

0

My recommendation is to use the Google Maps static API. While some users have had success with

--javascript-delay 3000

This did not work for my case. What I ended up using is the google maps static API - it generates a static map with no JS needed. More information here

https://www.api2pdf.com/render-google-map-to-pdf-with-headless-chrome/

roylewilliam
  • 35
  • 7