Blog

Render Google Map to PDF with Headless Chrome

If you are reading this article, you are likely having issue getting a Google Map to render properly when printing to PDF with Headless Chrome. The problem stems from Headless Chrome printing the page to PDF too fast — prior to Google Maps being able to display their map.

Here at API2PDF, we are often asked if there is a way to set a delay on Chrome from printing to PDF until after the javascript has successfully rendered the map. Unfortunately at this time, there is no reliable way for Chrome to do that. wkhtmltopdf, the other endpoint we offer, does have a javascriptDelay function built-in, but that PDF engine has its own problem.

The key here is understanding that a PDF is a static file. Think of it like printing something to physical paper. But Google Maps is interactive — it lets you zoom in, move around, and do all sorts of stuff. None of this makes sense for a PDF.

Solution

Google Maps offers another API that lives side-by-side with its maps api called the Google Maps Static API. It’s documentation lives here: https://developers.google.com/maps/documentation/maps-static/intro

This is great because it does not require any javascript what-so-ever. Instead, you render a basic <img> tag in HTML and the src is linked to the Google Maps image. It will render a static image of the map you are trying to render and Headless Chrome will have no issue with this.

This is the preferred and proper approach to rendering a Google Map with Headless Chrome to PDF.

Note: Api2Pdf is a REST API for PDF generation at massive scale. It supports HTML to PDF API, URL to PDF, Office documents to PDF, and bar code generation.