How to export Google Map to image?

Webix JS
#1

How to export a Google Map component to PNG? The view is not complete. See only my markers in the exported image, but no map background.

#2

Hey @tobkle, I assume that you’ve tried using webix.toPNG method? It seems that this method is working incorrectly with a Google Map, since it is presented in an iframe. We will fix this issue in the nearest future and you will be able to export iframes using webix.toPNG. For now, however, it does seem like there are a few ways around the problem:

First way is by using the Google Maps Static API to get the static image of the current map, although it seems that you will need an API key in order to do that: https://snippet.webix.com/xqvpx4j5. You can read more about Google Maps Static API here - Overview  |  Maps Static API  |  Google Developers.

Another way is to use a 3rd party library (html2canvas, same library we are using in the webix.toPNG method) to convert your html map container into canvas, afterwards of course you can do a ton of stuff with Canvas API, i.e. export it to image: javascript - Save current Google Map as image - Stack Overflow. Please note that you have to set useCORS to true for it to work.

#3

Thanks @Dzmitry for your fast answer.

Can’t use the static api, as I’m having around 500 markers and quite some dynamic filter and view logic for them. Can’t pass them as query params, will exceed the max length of the Url (for most browsers). Had that problem already with my filter logic. This stackoverflow article I’ve seen. Looks like I have to add and fiddle around with the html2canvas logic. There are some further articles with some transform logic depending on the Google Api version.

#4

Please take a look at the updated post @tobkle (I’ve only just updated it with relevant info), this is actually fixable from our side, and we’ll try to provide the fix very soon. For now though, yeah, the only option it seems in your case is to use the html2canvas library manually.

#5

This is my working solution:

#6

I can also confirm that as of Webix 6.4.3 this issue has been fixed, and toPNG/toPDF now works correctly with iframes (meaning it will work with maps as well).