This is just a quick thought experiment really. Yesterday I was working on a demo that made use of Google's Static Map API. I've blogged about this API for probably over a decade now and I rarely see people use it, but it's a lightweight, image only "API" for when you need simple map images without interactivity. Honestly, I see a lot of sites using the full JavaScript maps library when a simpler image would be fine. It's also an excellent way to use maps in presentations or emails as well. It occurred to me that the static map image could be a great way use of print media queries in CSS and I thought I'd build a quick demo to show this.
Media queries and print support has been around for years, but I didn't play with it myself till earlier this year when I blogged about cleaning up my print view for this site. (Although I probably need to revisit that as I've changed my design since then.)
I was curious to see if a print media query could be used to "swap out" a JavaScript map for a static one. I began with an incredibly simple map demo:
This is about as simple as you can get. If you're incredibly bored and want to see this running, you can do so here: https://cfjedimaster.github.io/webdemos/printmap/index.html
Ok, so how well does this print? I did a quick ctrl+p, saved the PDF, and this is what I got:
It's actually really, really good. My only complaint is the zoom icon in the upper right corner. Also, the "Report a map error" won't actually be a link.
So that works, but can we make it better? I began by adding in a static version of my map. (Note that the static map API does support markers and quite a few parameters, so you can do a lot more than what I'm showing here.)
Note I added a class to it. I then used this CSS:
Basically, hide the static map normally, and when printing, hide the map div that includes the JavaScript map and show the static version. And here's the result:
Slightly better! ;) Worth the effort? Probably. I will note that this does add additional load to the page as the static image is loaded but hidden. You can check for a matched media query in JavaScript using matchMedia, so in theory, you could delay adding the image to the DOM that way, but that feels a bit overkill.
You can hit this version here if you want to see, and the source for both may be found here: https://github.com/cfjedimaster/webdemos/tree/master/printmap